过渡与动画

发表于 更新于 分类于

过渡（最低支持 IE10）

  1. 过渡的基本使用
    • transition 过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同的样式之间变化自动添加“补间动画”
    • 优点：动画更细腻，内存开销小
    • transition: width 1s linear 0s;
      • 如果所有属性要参与过渡，可以写 all
    • 参数说明：什么属性需要过渡，动画时长，变化速度曲线，延迟时间
      过渡的四个小属性
      • transition-duration 动画时间
      • transition-property 哪些属性要过渡
      • transition-timing-function 动画变化曲线（缓动效果）
        • ease
        • linear
        • ease-in
        • ease-out
        • ease-in-out
        • 贝塞尔曲线
      • transition-delay 延迟时间
    • 哪些属性可以参与过渡？
      • 所有数值属性都可以参与过渡，比如
        • width
        • height
        • left
        • top
        • border-radius
      • 背景颜色和文字颜色都可以被过渡
      • 所有变形（包括2D和3D）都能被过渡
  2. 过渡的缓动效果（参考 transition-timing-function 属性）

动画

  1. 动画的定义和调用

    • 可以使用 @keyframes 来定义动画，keyframes 表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

    • 定义动画后，就可以用 animation 属性调用动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
       <!DOCTYPE html>
       <html lang="en">
       <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画的定义</title>
        <style>
            @keyframes r{
                from {
                    transform: rotate(0);
                }
                to {
                    transform: rotate(360deg);
                }
            }
            .box1 {
                width: 200px;
                height: 200px;
                border: 1px solid #333;
                animation: r 1s linear 0s;
            }
        </style>
       </head>
       <body>
        <div class="box1"></div>
       </body>
      </html>

    • animation: r 1s ease 3s 3;

      • 动画的参数：动画的名称，执行的时间，动画效果，延迟时间，执行次数
      • 如果想永远设置执行就是 infinite 属性
      • 如果想让动画的第2、4、6…..（偶数次）自动逆向执行，那么要加上 alternate 参数即可
      • 如果想让动画停止在最后结束状态，那么要加上 forwards

    • 多关键帧动画

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      @keyframes changeColor {
           0% {
               background-color: red;
           }

           50% {
               background-color: yellow;
           }

           100% {
               background-color: aqua;
           }
       }