【CSS3】CSS3 动画 ② ( 动画序列 | 使用 from 和 to 定义动画序列 | 定义多个动画节点 | 代码示例 )
warning:
这篇文章距离上次修改已过437天，其中的内容可能已经有所变动。
/* 定义动画序列 */
@keyframes example {
from {
background-color: red;
transform: translateX(0);
}
to {
background-color: yellow;
transform: translateX(100px);
}
}
/* 应用动画 */
div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}这段代码定义了一个名为 example 的关键帧动画，它从红色背景开始，然后平移到100像素的位置。然后，在 div 元素上应用这个动画，设置动画持续时间为4秒，并且设置动画无限次数循环。这样，div 元素的背景颜色会从红色渐变到黄色，并且不断地从初始位置向右移动100像素。
评论已关闭