CSS过渡动画

发布时间：2018-12-06 10:35:18 修改时间：2018-12-06 10:35:18 阅读：6957 评论：0 0

我们要完成过渡，我们需要使用一个transition这样的一个属性
        1：补间动画
            开始状态，结束状态
        2：帧动画    transition: all  5s linear  过渡延迟多少秒执行
             （1）设置过渡的属性 （all）  linear 匀速
             （2）过渡时间      ease-in
             （3）过渡的速度       ease-out    

————————————————————————————————————————————————————————————————————————————————————————

【 过渡 】（transtion:all 2s linear 3s;）

    transition 属性
    all 需要过渡的属性
    2s 过渡这些属性需要执行的时间
    linear 过渡的速度
    4s 延迟多少秒
【 2D——3D转换 】 我们2d 转换和3d 转换，我们都可以使用transform 属性
    2d 转换
         我们有三种转换效果
         ① scale(1.5,2)   放大 大于1；缩小 小于1
         ② translate(200px,200px)  向水平方向移动，垂直方向移动，可以接受负值（负值是反方向，百分比）
         ③ rotate() 正值顺时针方向，负值是逆时针方向
                   transform-origin 旋转的中心点的位置；默认的中心点在中间
    3d:转换
       掌握一个坐标系，有了x轴，y轴，z 轴的概念。此外，我们想在一个平面实现3d 的效果，我们使用到了透视..

        ① x轴，z轴，y轴的方向 tranlateX(200px) 水平向右移动
        ② 围绕x，y，z 轴旋转，角度，旋转.
        ③ 旋转的中心点.
        立体盒子：每一个平面（盒子）都对应一个3d 坐标系

        透视：观察者与目标物的距离 ，设置了这个距离之后，我们就可以透过透视产生立体的效果
                 transform-origin  旋转的终点的位置
                 transform-style:preserve-3d （把子元素放在一个3维空间内）

  【 动画 】 有一个animation属性  （这里有八个值）
                1:我要执行那个动画，名称
                2:执行动画需要花费的时间
                3:速度，执行动画的方式. steps()
                4:延迟多少秒执行动画
                5:循环的次数.
                6:是否交替执行动画.
                7:动画结束的状态.
                8:动画的暂时，运行状态.

 animation 属性:  move （动画的 名称）

    —— animation:move 10s linear

    动画执行的时间

    动画的速度
    延迟时间
    循环的次数
    动画是否交替的效果 alternate
    动画的结束状态 forward
    动画的状态  running  paused

1 // 定义动画
2 @keyfreames move{
3       from{
4       }
5       to{
6       }
7 }

 1 //  我们在做动画的时候我们定义一组动画
 2  @keyfreames move{
 3            0%{
 4                  }
 5            20%{
 6                  }
 7            40%{
 8                  }
 9            80%{
10                  }
11            100%{
12                  }
13   }

 

---