css多帧动画 |pc端的reset.css

/* 定义多帧动画 */  
@keyframes animate {  
0% { background-color: red; }  
25% { background-color: yellow; }  
50% { background-color: blue; }  
75% { background-color: green; }  
100% { background-color: red; }  
}  
/* 使用多帧动画 */  
div {  
animation: animate 5s linear infinite;  
}

上面的代码定义了一个名为 animate 的动画，包含了 5 个关键帧（0%、25%、50%、75% 和 100%），每个关键帧指定了不同的背景颜色。接下来，在 HTML 中通过 div 元素使用该动画效果，设定了动画播放的时间为 5 秒，动画速度为 linear，播放次数是无限循环。

多帧动画还可以使用 CSS3 transform 属性来实现，比如可以让一个元素顺时针或逆时针旋转。以下是一个例子：

/* 定义多帧动画 */  
@keyframes rotate {  
0% {transform: rotate(0deg);}  
100% {transform: rotate(360deg);}  
}  
/* 使用多帧动画 */  
div {  
animation: rotate 10s linear infinite;  
}

上面的代码定义了一个名为 rotate 的动画，包含了 2 个关键帧（0% 和 100%），指定了元素旋转的角度。接下来，在 HTML 中通过 div 元素使用该动画效果，设定了动画播放的时间为 10 秒，动画速度为 linear，并且播放次数是无限循环。

以上就是 CSS 多帧动画的基本知识，只要掌握一些简单的 CSS 技巧，就可以轻松实现动画效果。