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



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


  animation-delay


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


  animation-iteration-count


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


  animation-direction


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






    1. reverse:反方向运行



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



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


  animation-fill-mode


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






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



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



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



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


  animation-play-state


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


二:实例


动画实例一


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 1 h2{
 2             width:100px;
 3             height:100px;
 4             background:blue;
 5             position:absolute;
 6             left:0;top:0;
 7             /* 用animation 调用关键帧 */
 8             animation:h2Move 3s infinite;
 9         }
10
11         .box:hover h2{
12             /* 鼠标滑过动画暂定 */
13             animation-play-state:paused;
14         }
15
16         /* 制定关键帧 */
17         @keyframes h2Move{
18             0%{
19                 left:0;top:0;
20             }
21             25%{
22                 left:700px;top:0;
23             }
24             50%{
25                 left:700px;top:400px;
26             }
27             75%{
28                 left:0;top:400px;
29             }
30             100%{
31                 left:0;top:0;
32             }


动画实例二:


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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