以下是 @keyframes 规则的基本语法：
@keyframes animationName {
from {
/* 初始样式 */
}
to {
/* 终止样式 */
}
}
/* 或者使用百分比指定关键帧 */
@keyframes animationName {
0% {
/* 开始时的样式 */
}
50% {
/* 中间时刻的样式 */
}
100% {
/* 结束时的样式 */
}
}
- animationName: 为动画指定一个名称，可以在其他地方通过 animation 属性引用它。
- from 和 to 或者百分比（0%、50%、100%等）: 定义动画序列的关键帧。每个关键帧包含元素在不同时间点的样式。
示例：
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* 使用动画 */
.element {
animation: slide-in 1s ease-in-out;
}
这个例子定义了一个名为 slide-in 的动画，使元素从左侧滑入，然后通过 animation 属性应用这个动画。你可以根据需要定义更多的关键帧，并在动画中使用不同的样式属性，以创建各种各样的动画效果。
转载请注明出处：http://www.zyzy.cn/article/detail/4202/CSS