快速上手 CSS动画属性 animation

原创于 2022-12-04 08:55:57 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

本文详细介绍了CSS中@keyframes的使用方法及animation属性的各种参数设置，包括动画的状态变化、速度曲线、重复次数等，并解释了如何控制动画的方向及执行完毕后的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@keyframes 动画名称{     <!-- 两个状态 -->
    form{}
    to{}
}
@keyframes 动画名称{     <!-- 多个状态 -->
    10%{}   <!-- 时间的百分之10 -->
    ....
    100%{}
}
animation: 动画名称 持续时间 速度曲线 延迟时间 重复次数  动画方向  执行完毕状态; <!--除持续时间和持续时间需要一前一后外,其余属性无序 -->
速度曲线: linear/step(n)
重复次数: n/infinite 
动画方向: alternate     <!--(反向效果)-->
执行完毕状态: backwards<!-- (默认值,最初状态,动画播放完立即回到初始状态) -->/forwards<!-- (动画完成停留在动画最后一刻) (要把infinite去掉,不然没效果)-->

<!-- 暂停动画(配合hover使用)  -->
animation-play-state:paused;