以下是一个使用 @keyframes
规则定义动画的示例代码:
@keyframes myAnimation {
0% {
/* 动画初始状态的样式 */
transform: translateX(0);
}
50% {
/* 动画中间状态的样式 */
transform: translateX(50px);
}
100% {
/* 动画结束状态的样式 */
transform: translateX(100px);
}
}
在上述代码中,定义了一个名为 myAnimation
的动画,它在 0%、50% 和 100% 这三个关键帧上分别设置了不同的样式,从而实现动画效果。你可以根据需要修改关键帧上的样式和时间点。