CSS3-animation,动画

动画 Animaion只应用于页面中已存在的DOM元素上。

　　　　　　
　　　　　　IE10及主流浏览器支持，Safari和Chrome加前缀。

　　①animation：可为一个元素添加多个animation。

　　　　　　

　　　　　　animation-name：给@keyframes定义一个名称。默认none无效果。
　　　　　　animation-duration：定义动画一个周期的时间。默认0。单位s。
　　　　　　animation-timing-function：定义动画的速度曲线。【同transition】
　　　　　　animation-delay：定义过渡效果何时开始。默认0。单位s。
　　　　　　animation-iteration-count：定义循环次数。默认1。infinite无限。
　　　　　　animation-direction：定义播放动画的方式。
　　　　　　　　normal：先前播放。alternate：偶数次向前播放，基数次反向播放。
　　　　　　animation-play-state：规定动画播放状态。
　　　　　　　　running、paused。
　　　　　　　　可用JavaScript通过此属性控制动画。

　　　　Animation的属性变化图：

　　　　　　

　　②关键帧：
　　 　　@keyframes规则：规定动画效果【CSS样式】。
　　　　　　1）至少规定动画名和时长。
　　　　　　2）keyframes的单位必须是百分比值。
　　　　　　关键字from和to等同于0%和100%。为了得到最佳兼容，应该始终定义0%和100%选择器。

　　　　　　div1{
　　　　　　　　animation: myfirst1 5s;
　　　　　　}
　　　　　　keyframes myfirst1{
　　　　　　　　from {background:red;}
　　　　　　　　to {background:yellow;}
　　　　　　}


　　　　　　可设置不同时间段的动画：
　　　　　　div2{
　　　　　　　　animation: myfirst2 5s;
　　　　　　}
　　　　　　@keyframes myfirst2{
　　　　　　　　0%   {background: red;}
　　　　　　　　25%  {background: yellow;}
　　　　　　　　50%  {background: blue;}
　　　　　　　　100% {background: green;}
　　　　　　}