animation 动画 与 transition

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
animation-fill-mode	规定动画播放完毕后，动画定格的动画帧
animation-play-state	动画播放的状态（暂停/播放)

 

①

动画名称

持续时间   

播放速率与transition一致             其他 可选值：ease  |   linear   |   ease-in   |   ease-out   |   ease-in-out     

延迟时间

播放次数                                         其他可选值：infinite   (   无限次  )

动画播放是否反向                        其他可选值：normal（普通） |     reverse（反向） |     alternate（先正向，后反向） |     alternate-reverse（先反向，后正向

播放结束后固定在哪一帧           其他可选值： none（无） |    forwards（结束帧） |    backwards（开始帧） |    both（开始帧或结束帧）    

动画播放的状态（暂停/播放)    animation-play-state:  running | paused;     

 

 ②

@keyframes   规定动画

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

 

③

transition

默认值：transition：all 0 ease 0；

• transition-property   规定过渡效果的css属性名称。
• transition-duration   规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function   规定速度效果的速度曲线。
• transition-delay   定义过渡效果何时开始。

transition-timing-function：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

常见  1：translate

transform:translate3d(x,y,z);   3d转换

translate3d(x,y,z)  

参数解析：

（1）.x：表示在 x 轴方向的位移。

（2）.y：表示在 y 轴方向的位移。

（3）.z：表示在 z 轴方向的位移。

 

常见  2：rotate 角度

transform:rotate(7deg);    旋转7度

css 角度单位   deg，grad，rad，turn

deg :   度，一个圆等于360度

grad:   梯度，一个圆有400梯度

rad： 弧度，一个圆共2π弧度

turn：圈，一个圆有一个圈

 

常见  3：scale 大小比例

transform:scale(1.5);  放大1.5倍

参数解析：

① transform:scaleX(x)

说明： x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。 

② transform:scaleY(y)

说明： y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

③ transform:scale(x,y)

说明： x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。

注：Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

 

常见  4：skew 扭曲变形

transform:skew(1.5);  放大1.5倍

常见  5：matrix 矩阵变形

第一种：fadeIn-动画

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 800px;-webkit-animation: fadeIn 2s ease 0.5s 1 both;}
.item-02{ position: absolute; left: 250px; top: 200px; width: 800px;-webkit-animation: fadeIn 2s ease 0.8s 1 both;}
.item-03{ position: absolute; left: 100px; top: 400px; width: 800px;-webkit-animation: fadeIn 2s ease 1.6s 1 both;}
.item-04{ position: absolute; left: 300px; top: 600px; width: 800px;-webkit-animation: fadeIn 2s ease 2.4s 1 both;}
@-webkit-keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}

 

第二种：fadeInUp-动画

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: fadeInUp 2s ease 1s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: fadeInUp 2s ease 1.5s 1 both;}
@-webkit-keyframes fadeInUp{
  0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
  0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
  100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}

 

第三种：fadeInDown-动画

.pages .p3 .itms .itm-01{ left: 0px;-webkit-animation: fadeInDown 2s ease-out 0.5s 1 both;}
.pages .p3 .itms .itm-02{left: 97px;-webkit-animation: fadeInDown 2s ease-out 1s 1 both;}
.pages .p3 .itms .itm-03{left: 192px;-webkit-animation: fadeInDown 2s ease-out 1.5s 1 both;}
.pages .p3 .itms .itm-04{ left:289px;-webkit-animation: fadeInDown 2s ease-out 2s 1 both;}
.pages .p3 .itms .itm-05{ left: 385px;-webkit-animation: fadeInDown 2s ease-out 2.5s 1 both;}
.pages .p3 .itms .itm-06{ left: 482px;-webkit-animation: fadeInDown 2s ease-out 3s 1 both;}
@-webkit-keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
  100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}

 

第四种：fadeInLeft-动画

.header-line{
    -webkit-animation-name:fadeInLeft;
    animation-name:fadeInLeft；
}
.header-line{
    background-color: #000;
    height: 2px;
        animation: fadeInLeft 2s ease 0.3s 1 normal;
}
@-webkit-keyframes fadeInLeft{
    0%{
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)}
    100%{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@keyframes fadeInLeft{
    0%{
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    100%{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}

 

第五种方式：fadeInRight-动画

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: -50px; top: 0px; width: 1100px;-webkit-animation: fadeInRight 9s ease 0s 1 both;}
@-webkit-keyframes fadeInRight{
  0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
  100%{opacity:1;transform:none}
}
@keyframes fadeInRight{
  0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}