【css3】animation

最新推荐文章于 2025-08-23 16:16:10 发布

原创最新推荐文章于 2025-08-23 16:16:10 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

本文详细介绍了CSS动画的关键概念，包括关键帧动画的定义方法、动画的各种属性设置如播放时间、播放方式、延迟时间、循环次数等，并通过实例展示了如何创建一个旋转动画。

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

参数

animation-name : 关键帧动画的名字
animation-duration：播放时间(规定动画多久播放完毕)
animation-timing-function：播放方式（动画的速度曲线）
animation-delay：开始时间（也可理解为延迟多久开始播放）
animation-iteration-count：循环次数（infinite无限循环）
animation-direction：播放方向（alternate翻转回归原来状态）
animation-play-state：播放状态（running 、paused）
animation-fill-mode：时间外属性（动画开始之前或结束之后发生的动作）
none(默认) : 动画开始前与结束后均为元素默认状态
forward 动画结束后保留最后一帧状态
backwards 动画开始前即为动画第一帧状态
both 前后均保存

keyframes（关键帧）

语法

     @keyframes xxx{
          from {  }
          66% {  }
          to {  }
     }

浏览器前缀
添加在这里：@-webkit-keyframes

调用

-webkit-animation : rotate 10s ease-in infinite alternate;
@-webkit-keyframes rotate{
        from {
            transform: rotateX(180deg) rotateY(180deg);
        }
        to {
            transform: rotateX(0deg) rotateY(0deg);
        }
    }