.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一起使用 否则不生效）
默认是播放一次 动画结束后 会回到最初状态
速度曲线 ---贝塞尔曲线