/* 定义动画关键帧 */
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* 应用动画到元素 */
.slide-in {
animation: slideIn 1s ease-in-out;
}
/* 也可以使用 animation 属性的详细写法 */
/*
.slide-in {
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
*/
在上面的示例中，我们创建了一个名为 slideIn 的动画关键帧，定义了元素从左侧滑入的效果。然后，我们使用 .slide-in 类来应用这个动画。
动画属性解释：
- animation-name: 指定要应用的动画名称。
- animation-duration: 动画持续时间。
- animation-timing-function: 动画的时间函数（控制动画速度曲线）。
- animation-delay: 动画延迟时间。
- animation-iteration-count: 动画播放次数，可以是具体次数或 infinite。
- animation-direction: 动画播放方向（normal, reverse, alternate, alternate-reverse 等）。
- animation-fill-mode: 动画执行前和执行后如何应用样式（forwards, backwards, both, none）。
- animation-play-state: 控制动画的播放状态（running, paused）。
这只是 CSS 动画的基础，你可以通过组合关键帧、调整动画属性等方式创建更加复杂和多样化的动画效果。同时，CSS 动画也可以与 JavaScript 结合使用，以实现更高级的交互效果。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12587/CSS