CSS3 动画

CSS3 动画

动画的基本使用

  • 制作动画分为两不

    • 先定义动画
    • 再使用(调用)动画

  • 用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}
  • 元素使用动画
div {
    width: 200px;
    height: 200px;
    background-color: red;
    /* 动画名称 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间;
}

  • 动画序列

    • 0% 是动画的开始，100% 是动画的完成，这样的规划就是动画序列
    • 再@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
    • 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变多的样式任意多的次数
    • 请用百分比来规定变化发生的时间，或用关键词 "from"和 "to"，等同于0%和100%

  • 现在我们来简单的体验一下

  • 我们想页面一打开，一张图片就从左边走到右边

<style>
    @keyframes move {
        /* 开始状态 */
        0% {
            transform: translateX(0px);
        }
        /* 结束状态 */
        100% {
            transform: translateX(500px);
        }
    }
   img {
       width: 150px;
       /* 动画名称 */
       animation-name: move;
       /* 持续时间 */
       animation-duration: 2s;
   }
</style>

<body>
    <img src="./u=986476525,3647648589&fm=11&gp=0.jpg" alt="">
</body>

  • 上面我们实习的是一次的改变样式的效果
  • 当然，动画是可以做多个状态的变化的keyframs 关键帧

@keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(800px, 0);
            }
            50% {
                transform: translate(800px, 300px);
            }
            75% {
                transform: translate(0, 300px);
            }
            100% {
                transform: translate(0, 0);
            }
        }

  • 注意
    • 里面的百分比必须要是整数
    • 里面的百分比就是总的时间的划分

动画常用属性

  • @keyframes规定动画

  • animation所有动画属性的简写属性，除了animation-play-state属性

  • animation-name是规定@keyframes动画的名称(必须的)

  • animation-duration是规定动画完成一个周期所花费的秒或毫秒(必须的)

    • 默认是 0

  • animation-timing-function是规定动画的速度曲线

    • 默认是"ease"动画以低速度开始然后加快，在结束前变慢
    • 值linear匀速
    • 值ease-in动画以低速开始
    • 值ease-out动画以低速结束
    • 值ease-in-out动画以低俗开始和结束
    • 值steps()指定了时间函数中的间隔数量(步长)
      • 就是分几步来完成我们的动画
      • 有了steps就不要在写ease或者linear

  • animation-delay是规定动画何时开始的

    • 默认是 0

  • animation-iteration-count是规定动画倍播放的次数

    • 默认是1
    • 值infinite无限次

  • animation-direction是规定动画是否在下一周期逆向播放

    • 默认是normal
    • 值alternate逆播放

  • animation-play-state规定动画是否在正在运行或暂停，可配合事件使用

    • 默认是running
    • 值paused暂停

  • animation-fill-mode是规定动画结束后状态

    • 值backwards回到起始
    • 值forwards保持结束位置

动画简写属性

  • 前面两个属性name duration一定要写，其它可以省略，不包括animation-play-state属性，顺序如下
  • animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
  • cssanimation: name duration timing-function delay iteration-count direction fill-mode;
posted @   懒惰ing  阅读(145)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛