动画

1、基本实现

关键帧：

定义关键帧要用@keyframes声明，并自定义一个动画的名称。

@keyframeschange_bgpic{

                                     0%{

                                               background-color:red;

                                               background-image:url(img/YDUI-新浪微博.png);

                                     }

                                     30%{

                                               background-color:orangered;

                                               background-image:url(img/YDUI-腾讯QQ.png);

                                     }

                                     60%{

                                               background-image:url(img/YDUI-主页.png);

                                     }

                                     100%{

                                               background-color:black;

                                               background-image:url(img/YDUI-足迹.png);

                                     }

                            }

也可以写成：

                            @keyframeschange_bgpic{

                                     from{

                                               background-color:red;

                                               background-image:url(img/YDUI-新浪微博.png);

                                     }

                                     30%{

                                               background-color:orangered;

                                               background-image:url(img/YDUI-腾讯QQ.png);

                                     }

                                     60%{

                                               background-image:url(img/YDUI-主页.png);

                                     }

                                     to{

                                               background-color:black;

                                               background-image:url(img/YDUI-足迹.png);

                                     }

                            }

调用@keyframes声明的动画：

.animation_demo1{

                                     height:500px;

                                     width:500px;

                                     background-color:bisque;

                                     animation:change_bgpic 6s ease-in infinite;

                            }

<divclass="animation_demo1"></div>

2、属性详解

animation-name:none|IDENT[,none| IDENT]，none表示没有动画效果，IDENT表示动画名称，需要和@keyframes声明的动画名一致

animation-duration:<time>，以秒s为单位，表示从0%到100%需要的时间，等于0表示没有动画效果

animation-timing-function:ease、ease-in、ease-in-out、ease-out、linear、cubic-bezier表示动画播放的效果

animation-delay:<time>表示动画开始播放的时间

animation-iteration-count:infinite|<number>|[,infinite|<number>]*表示设置动画播放的次数

animation-direction:normal|alternate[,normal|alternate]*表示动画播放方向，normal表示每次循环都向前播放，alternate表示动画播放为偶数次向前播放，为奇数次向反方向播放

animation-play-state:running|paused表示动画的播放状态，paused表示暂停，重启后从原点开始播放，running表示开始

animation-fill-mode:none|forwards|backwards|both表示设置动画时间外的属性，none：无定义，forwards:动画结束后停留在关键帧的位置，backwards:动画结束后停留在初始帧的位置，

both:表示兼具forwards和backwards两种效果。