.a { width: 500px; height: 500px; /* 动画的名字 持续时间 状态 backwards infinite alternate*/ animation: change 1s backwards alternate infinite; } @keyframes change { from { ackground-color: #123; } /* 0% { } */ 20% { font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px;">#456; } 40% { font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px;">#789; } 60% { font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px;">#a1b2c3; } 80% { font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px;">#a23aaa; } /* 100% { } */ to { font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px;">#123; } } </style> <body> <!-- 关键帧动画 逐帧动画 animation 动画的名字 持续时间 状态forwards/backwards 播放次数infinite（无限循环） 动画反向alternate（一般需要和播放次数infinite一起使用 否则不生效） 默认是播放一次 动画结束后 会回到最初状态 速度曲线 ---贝塞尔曲线 -->
标签：动画,family,height,逐帧,19px,New,font,size From： https://www.cnblogs.com/xuxiang946210/p/17589587.html