CSS3 动画效果专辑（animation）

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;
}

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