Day24 CSS Animation 动画

昨天介绍完了transition动画，今天要介绍Animation动画，两者有甚麽区别呢? Animation动画可以控制的细节更多，而且不需要触发条件，可以直接进行动画，至於要怎麽设定，就让我们看下去。

Animation

先让我们看看这个可以设定的属性有哪些?

animation: name duration timing-function delay iteration-count direction fill-mode;

animation:动画名称播放时间延迟执行的时间速度次数方向填充模式播放状态

动画名称name:在开始动画前，我们要先设定关键影格(keyframes)，他是在甚麽时间点，这个动画的样子，例如我0秒时要是正方形，动画跑到最後要是圆形。就可以这样设置。中间得时间是依造你动画设定几秒去分配。

radius是你自己取的动画名称，取甚麽都可以。
设定这个动画长时间为5秒。
0%是指在0秒时这个动画圆角是0，
100%是指在5秒时这个动画圆角为100%。

播放时间duration:整个动画的时间。
延迟执行的时间delay:延迟几秒後开始播放动画。
速度timing-function:动画播放的速度。
次数iteration-count:动画要播放几次。
实用的重复播放属性，infinite。
方向direction:可以设定要不要来回播放。
实用的来回播放属性:alternate。
填充模式fill-mode:设定动画开始或结束的时候，会是初始影格还是最终影格的状态。

我们来看下面简单的例子。

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            animation: radius 2s;
        }


        @keyframes radius{
            0%{ border-radius: 0;}
            100%{ border-radius: 100%;}
        }
    </style>

<body>
    <div class="box">
    </div>
</body>

我们初始影格是没有圆角，而结束时圆角100%，动画时间两秒。

这就是一个最简单的Animation动画，而我们还有很多属性没有设定到。

再来看第二个粒子

我想要初始影格是圆角50%，最终影格是圆角0%，动画时间1秒，延迟时间0.5秒，次数无限循环，方向重复播放。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            animation: radius 1s .5s ease infinite alternate;
        }


        @keyframes radius{
            0%{ border-radius: 50%;}
            100%{ border-radius: 0%;}
        }
    </style>
<body>
    <div class="box">
    </div>
</body>

套用到我们网页的例子

.banner{
            position: relative;
            margin-bottom: 305px;
        }
        
.banner .aimg1{
            width: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            animation: silder 10s linear infinite ;
        }

        .banner .aimg2{
            width: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            animation: silder2 10s linear infinite ;
            
        }

        @keyframes silder {
            10% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            40% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            50% {
                opacity: 0;
                filter: alpha(opacity=0);
            }
            100% {
                opacity: 0;
                filter: alpha(opacity=0);
            }
        }

        @keyframes silder2 {
            50% {
                opacity: 0;
                filter: alpha(opacity=00);
            }
            60% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            90% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            100% {
                opacity: 0;
                filter: alpha(opacity=0);
            }
        }