【CSS3】CSS3 动画 ② ( 动画序列 | 使用 from 和 to 定义动画序列 | 定义多个动画节点 | 代码示例 )
/* 定义动画序列 */
@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像素。
评论已关闭