@keyframes 和 animation 是 CSS 中用于创建动画效果的两个属性。它们通常一起使用,但服务于不同的目的:
@keyframes
- 定义动画中的一系列关键帧。
- 关键帧指定了动画在特定时间点的样式。
- 每个关键帧都是一个 CSS 规则块,指定了动画中该点应应用的样式。
animation
CSS animation 属性参数详解可参考 此处
- 将动画应用于元素。
- 指定动画的持续时间、延迟、迭代次数和关键帧名称。
- 关键帧名称引用由
@keyframes
定义的关键帧集合。
使用示例:
/* 定义关键帧 */
@keyframes example {
0% {
opacity: 0; // 在动画开始将不透明度设为0
}
50% {
opacity: 1; // 在动画规定时间的一半将不透明度设为1,实现淡入效果
}
100% {
opacity: 0; // 在动画结束时将不透明度设为0,实现淡出效果
}
}
/* 将动画应用于元素 */
.element {
animation: example 2s infinite;
}
效果:
上面代码将使元素在 2 秒内执行一个循环的淡入淡出动画。
重要注意事项:
@keyframes
规则必须在样式表的开头定义,而animation
属性可以应用于任何元素。- 每个
@keyframes
规则都必须有一个唯一的名称。 animation
属性可以接受多个值,每个值都用空格分隔。
其他用法:
除了淡入淡出效果外,你还可以使用 @keyframes
和 animation
创建更复杂的动画,例如:
- 旋转
- 平移
- 缩放
- 颜色变化