CSS animation 属性

animation 属性

animation实现动画主要由两个部分组成通过类似Flash动画的关键帧来声明一个动画

在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

六个属性

1.animation-name 由@keyframes创建的动画名称

2.animation–duration 过渡时间

3.animation-timing-function 过渡方式

4.animation-delay 延迟时间

5.animation-direction 动画的播放方向

6.alternate，动画播放为偶数次则向前播放

1.animation-name

绑定到选择器的keyframe名称. 里面的donghua就是我们自己设置的名称

  2. animation-duration，animation-delay

    这两个分别表示我们定义的这个关键帧动画的持续时间，以及开始时的延迟时间。都是以秒或者毫秒计时。            

其中的3秒就是animation–duration 过渡时间，0.5秒就是animation-delay 延迟时间

 

   3. animation-timing-function

   用于定义函数变化速度曲线的

 linear  规定以相同速度开始至结束的过渡效果

ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)

ease-out    规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)

ease-in-out 规定以慢速开始和结束的过渡效果

4.translate3D

里面分别表示x轴距离 y轴距离 和z轴距离 

 要想实现3d效果必须要在父元素上加上一个属性perspective

   transform: rotateX(30deg);

 

   transform: rotateY(60deg);

 

 

  transform: rotateZ(-60deg); transform: rotate(60deg);