.a {
width: 500px;
height: 500px;
/* 动画的名字 持续时间 状态 backwards infinite alternate*/
animation: change 1s backwards alternate infinite;
}
@keyframes change {
from {
ackground-color: #123;
}
/* 0% {
background-color: #123;
} */
20% {
background-color: #456;
}
40% {
background-color: #789;
}
60% {
background-color: #a1b2c3;
}
80% {
background-color: #a23aaa;
}
/* 100% {
background-color: #123;
} */
to {
background-color: #123;
}
}
<!--
关键帧动画 逐帧动画 animation
动画的名字 持续时间 状态forwards/backwards 播放次数infinite（无限循环）
动画反向alternate（一般需要和播放次数infinite一起使用 否则不生效）
默认是播放一次 动画结束后 会回到最初状态
速度曲线 ---贝塞尔曲线
-->
