@keyframes是CSS3中用于创建动画的关键帧规则。通过定义关键帧动画的起始状态和终止状态，可以创建出各种复杂的动画效果。@keyframes规则包含两个部分：关键帧选择器和声明块。
关键帧选择器定义了动画的时间点，通常使用百分比来表示。例如，定义从0%到100%的关键帧，表示动画从开始到结束的过程。声明块则定义了在该时间点上元素的状态，包括位置、大小、颜色、透明度等。声明块可以包含CSS属性和值，和普通的CSS样式类似。
下面是一个@keyframes的简单示例：
@keyframes myanimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
上面的代码定义了一个名为“myanimation”的关键帧动画，该动画从透明度为0的状态渐变到透明度为1的状态，动画从开始到结束会经历0%到100%的过程。
在使用@keyframes时，通常需要通过CSS选择器将该动画应用于特定的元素，例如：
div {
animation: myanimation 2s linear infinite;
}
上面的代码表示将名为“myanimation”的关键帧动画应用于所有的div元素，动画持续时间为2秒，动画速度为线性，无限循环。
总的来说，@keyframes是一个非常强大的CSS3动画属性，通过定义关键帧和声明块可以创造出各种复杂的动画效果，让网页更加生动有趣。
京公网安备 11010802030320号