css 中的动画元素

                                                      css 中的动画元素

动画元素的属性是：animation

位移元素的属性是：transtion

那我们就来看看他们的相同点和不同点都有哪些：animation  VS  transtion

相同点：都是随着时间改变属性。

不同点：transtion需要出发一个时间，才会随着时间改变其CSS属性。

　　　　而animation在不需要出发任何时间的情况下也可以显示随着时间变化来改变元素CSS的属性值，从而达到一种动画的效果。CSS的animation就需要明确的动画属性值。
　　　　初始效果——动画帧——动画帧——最终的效果

　　　　以下是我整理的几个animation的属性：
1、animation-name： 必要属性
检索或者设置对象所应用的动画名称
必须与规则@keyframes配合使用。

定义关键帧：
@keyframes name｛
from｛｝
to{ }
｝
或者
@keyframes name{
0%{}
50%{}
100%{}
}

  @keyframes zhuan {
            from{transform: rotate(30deg)}
            to{transform: rotate(180deg)}
            /*首尾一般是重合的，若是不重合，转完会卡一下，迅速到开始的位置上*/
        }

 

2、animation - duration{} 必要的
检索或者设置对象动画的持续时间，单位是s或者ms。

    transition-duration:1s;

 

3、animation - delay 非必要
// 检索或者设置对象动画延迟的时间。

4animation - timing -function:
动画过度类型的属性值
属性值有“;inear 匀速 ease平滑过度 ease默认值，平滑过去 ease-in 由慢到快
ease=out 由快到慢 ease-in-out 由慢到块再到慢
step-start 马上跳到关键帧画满的最后一帧。

5、animation - iteration - count： value；（数值）
infinite; （无限循环）
设置动画的循环播放次数

6、animation -direction：normol； 正常方向
reverse 反方向运行
alternate 正常运行再反方向运行，并且持续运行
alternate-reverse 反向运行再正常运行并且持续运行。
设置动画在循环中是否反向运行

7、animation-fill-mode：none；默认值 在运动结束后回到初始位置，在延迟的情况下，让0%在延迟后生效。
backwards； 在延迟的情况下，让0%在延迟前生效。
forwards； 在动画结束后，就停流在结束位置。
both； backwards和forwards属性同时生效。
动画在播放前后，动画效果是否可见。

8、animation-play-state：running； 运动
paused； 暂停
通过鼠标控制动画运行或暂停。

而transition运用就比较简单：

 transform: translate(100px,200px);
            /*右平移100px 下平移200px  */
            transform: rotate(45deg);
            /*旋转45度*/
            transform: scale(1.5);
            /*放大1.5倍；谷歌浏览器最小字符12px；若想得到一个10px的字可以设置20px再缩小*/
        /*若想得到这三个效果同时出现，则可以： transform:translate(100px,200px) rotate(45deg) scale(1.5);*/