CSS3 @keyframes 规则
CSS3 @keyframes 规则
CSS3 @keyframes
规则是 CSS3
中一个用于定义 CSS
动画的方法,它允许我们在动画过程中指定多个 CSS
样式,并在动画执行期间过渡到不同的样式。
语法
@keyframes <animation-name> {
<keyframe-selector> {
<css-styles>;
}
}
属性
animation-name
该属性定义动画的名称,用于在后续的 animation
属性中引用。动画名称必须以字母开头,且不能以数字开头。
keyframe-selector
该属性定义动画在什么时间点值应该发生变化。如 0%
表示动画刚开始时的状态,100%
表示动画结束时的状态。keyframe-selector
可以是一个百分比值,也可以是用关键词命名的相对时间点值,如 from(等同于 0%) 和 to(等同于 100%)。
css-styles
该属性定义动画对应时间点应该应用哪些 CSS
样式。
示例
以下是一个简单的例子,它定义了一个从 0
度到 360
度旋转的动画:
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
使用 rotate
动画:
div {
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
上面的例子中,animation-name
指定了使用 rotate
这个动画,animation-duration
指定动画持续时间为 3 秒,animation-timing-function
指定动画运动轨迹为线性,animation-iteration-count
指定动画循环播放无限次。
兼容性
@keyframes
规则从 CSS3
开始出现,并得到了所有现代浏览器的支持,包括:Chrome、Safari、Firefox、IE10+ 和 Opera。
总结
@keyframes
规则通过定义动画的名称、各个时间点的样式以及动画的持续时间、运动轨迹等属性,使得 CSS
动画的实现变得简单明了。在实际开发中,可以通过结合其他 CSS
属性和技巧,实现丰富多彩、生动有趣的视觉效果。