css3动画属性-animation

一：动画属性参数的详解

　　简介

　　　　CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。

　　语法

　　　　<‘ animation-name ‘>：检索或设置对象所应用的动画名称
　　　　<‘ animation-duration ‘>：检索或设置对象动画的持续时间
　　　　<‘ animation-timing-function ‘>：检索或设置对象动画的过渡类型
　　　　<‘ animation-delay ‘>：检索或设置对象动画延迟的时间
　　　　<‘ animation-iteration-count ‘>：检索或设置对象动画的循环次数
　　　　<‘ animation-direction ‘>：检索或设置对象动画在循环中是否反向运动
　　　　<‘ animation-fill-mode ‘>：检索或设置对象动画时间之外的状态
　　　　<‘ animation-play-state ‘>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

　　animation

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

　　animation-name

　　　　规定 @keyframes 动画的名称。就是@keyframes后面跟着的动画名称。

　　animation-duration

　　　　规定动画完成一个周期所花费的秒或毫秒。默认是 0。

　　animation-timing-function

　　　　规定动画的速度曲线。默认是 "ease"。

　　　　常见的动画速度参数：

1. 1. linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0

   2. ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

   3. ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

   4. ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

   5. ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

   6. step-start：等同于 steps(1, start)

   7. step-end：等同于 steps(1, end)

   8. steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

   9. cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

　　animation-delay

　　　　　规定动画何时开始。默认是 0。也即是指动画延时执行时间。

　　animation-iteration-count

　　　　　规定动画被播放的次数。默认是 1。当然，我们可以设置2次，3次，依次递推。还有个无线循环关键字infinite,也即是反复循环播放动画。

　　animation-direction

　　　　规定动画是否在下一周期逆向地播放。默认是 "normal"。当然还有下列值：

1. 1. reverse：反方向运行

   2. alternate：动画先正常运行再反方向运行，并持续交替运行

   3. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　animation-fill-mode

　　　　规定对象动画时间之外的状态。

1. 1. none：默认值。不设置对象动画之外的状态

   2. forwards：设置对象状态为动画结束时的状态

   3. backwards：设置对象状态为动画开始时的状态

   4. both：设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧；动画完成之后是"to"或"100%"关键帧状态。

　　animation-play-state

　　　　规定动画是否正在运行或暂停。默认是 "running"。还有个值paused：暂停。

二：实例

动画实例一：

h2{
            width:100px;
            height:100px;
            background:blue;
            position:absolute;
            left:0;top:0;
            /* 用animation 调用关键帧 */
            animation:h2Move 3s infinite;
        }

        .box:hover h2{
            /* 鼠标滑过动画暂定 */
            animation-play-state:paused;
        }

        /* 制定关键帧 */
        @keyframes h2Move{
            0%{
                left:0;top:0;
            }
            25%{
                left:700px;top:0;
            }
            50%{
                left:700px;top:400px;
            }
            75%{
                left:0;top:400px;
            }
            100%{
                left:0;top:0;
            }

动画实例二：

　　结合animation与transform的结合(旋转3D立方体效果)

.box{
            width:300px;
            height:300px;
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
            transform-style: preserve-3d;
            transform:rotateX(20deg) rotateY(30deg);
            transition:2s;
            animation: boxMove 5s linear infinite;
        }
        @keyframes boxMove{
            0%{
                transform:rotateX(0) rotateY(0);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }

源码地址　　https://pan.baidu.com/s/1gnM7VjFgyM1ZU1agPXFKjQ　　提取码：zhqp