CSS3 动画效果专辑（animation）

最近同事推荐了我一个网站，让我照着那网站全部自己写一遍，学习学习，练练手。所以用到了动画效果，觉得以后都会用到，所以索性整理记录下来，方便重复使用。

动画效果实例中的元素id、class名等都是直接从项目中粘贴过来的，可以根据实际需要更改。

首先写一下动画效果实现的基本语法等：

1、首先，用@keyframes声明一个动画，前面一般加浏览器前缀，后面加动画名称。

Chrome/Safiri/IOS/Android/Blackberry浏览器前缀：-webkit-

Firefox浏览器前缀：-moz-

语法：

@keyframes 动画名称{

    from{CSS样式;}

    percentage{CSS样式;}

    ...

    to{CSS样式;}

}

也可以将from和to换成0%和100%。

2、其次，调用动画

语法：

元素{

    animation：动画属性；

}

动画属性：可以一个个分开写，也可以合并协商animation里。

同时调用多个动画时，不同的动画之间用“,”逗号分隔。

动画属性包含：

①animation-name:动画名称，在@keyframes规则里定义的；

②animation-duration：动画播放的总时间，一般以秒为单位；

③animation-timing-function：动画播放方式，值：ease/linear/ease-in/ease-out/ease-in-out/ease-in-out/贝塞尔曲线

④animation-dadely：动画延迟时间，一般以秒为单位

⑤animation-iteration-count：动画播放次数，值：infinite（无数次）/整数

⑥animation-direction：动画播放方向，值：normal（向前）/alternate（偶数次向前播放，奇数次向反方向播放）

⑦animation-play-state：播放状态，值：running（播放）/paused（暂停）

⑧animation-fill-mode：动画开始和结束之后的操作，值：none（默认值，表示动画播放结束后会返回到初始帧处）/forwards（保持最后关键帧时的动画状态）/backwards（动画开始时便启用动画的初始帧）/both（同时具有forwards和backwards效果）

动画一：图片/图标抖动(鼠标经过li时，img会抖动)

@-webkit-keyframes swing{    from{

        -webkit-transform:translateX(3px) rotate(2deg);        transform:translateX(3px) rotate(2deg);

    }    20%{

        -webkit-transform:translateX(-3px) rotate(-2deg);        transform:translateX(-3px) rotate(-2deg);

    }    40%{

        -webkit-transform:translateX(3px) rotate(2deg);        transform:translateX(3px) rotate(2deg);

    }    60%{

        -webkit-transform:translateX(-3px) rotate(-2deg);        transform:translateX(-3px) rotate(-2deg);

    }    80%{

        -webkit-transform:translateX(3px) rotate(2deg);        transform:translateX(3px) rotate(2deg);

    }    to{

        -webkit-transform:translateX(-3px) rotate(-2deg);        transform:translateX(-3px) rotate(-2deg);

    }}li:hover img{    animation:swing .7s both;}

动画二：图标/图片永久旋转

@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}img{animation: rotate 2s infinite linear;}

动画三：元素逐个淡入加位移（h3标题里的字逐个出现，且奇数个往下移，偶数个往上移）

html

<h3 id="welcome-h3">    <span class="cssdb4d0922f1a9fa">文</span>    <span class="cssdb4d0922f1a9fa">昭</span>    <span class="cssdb4d0922f1a9fa">天</span>    <span class="cssdb4d0922f1a9fa">下</span>     <span class="cssdb4d0922f1a9fa">博</span>    <span class="cssdb4d0922f1a9fa">览</span>    <span class="cssdb4d0922f1a9fa">乾</span>    <span class="cssdb4d0922f1a9fa">坤</span></h3>

css

@-webkit-keyframes downward{0%{-webkit-transform:translateY(-20px);transform:translateY(-20px);}100%{-webkit-transform:translateY(0px);transform:translateY(0px);}}@-webkit-keyframes upward{0%{-webkit-transform:translateY(20px);transform:translateY(20px);}100%{-webkit-transform:translateY(0px);transform:translateY(0px);}}

#welcome-h3>span:nth-of-type(odd){animation: fade-in 2s ease-in forwards, downward 1s linear forwards;          }#welcome-h3>span:nth-of-type(even){animation: fade-in 2s ease-in forwards, upward 1s linear forwards;          }#welcome-h3>span:nth-of-type(2){animation-delay: 0.5s;          }#welcome-h3>span:nth-of-type(3){animation-delay: 1s;          }#welcome-h3>span:nth-of-type(4){animation-delay: 1.5s;          }#welcome-h3>span:nth-of-type(5){animation-delay: 2s;          }#welcome-h3>span:nth-of-type(6){animation-delay: 2.5s;          }#welcome-h3>span:nth-of-type(7){animation-delay: 3s;          }#welcome-h3>span:nth-of-type(8){animation-delay: 3.5s;          }

动画四：图标/图片永久上下移动

@-webkit-keyframes updown{25%{    -webkit-transform:translateY(-10px);    transform:translateY(-10px);}50%{-webkit-transform:translateY(0);transform:translateY(0);}75%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}}

img{animation: updown 2s infinite linear;}

会持续更新别的动画效果.......