css3动画 | 易学教程

什么是css3动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

浏览器兼容：

1）Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

2）Chrome 和 Safari 需要前缀 -webkit-。

3）Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

创建动画：

@keyframes 创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果

1）关键词“from”“to”

　　 /*定义一个动画集*/
/*@keyframes 动画集名字*/

　　 @keyframes rotate{

　　　　from{

　　　　　　transform:rotate(0deg);

　　　　}

　　　　to{

　　　　　　transform:rotate(360deg);

　　　　}

　　}
       @-webkit-keyframes rotate{/*Safari和Chrome*/
            from{
               transform:rotate(0deg);
           }
            to{
               transform:rotate(360deg);
           }
       }

2）百分比

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}动画属性：animation：所有动画属性的简写属性，除了 animation-play-state 属性。animation-name 规定 @keyframes 动画的名称。animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-timing-function 规定动画的速度曲线。默认是 "ease"。　　　　　　　　　　　　　取值：linear 动画从头到尾的速度是相同的。　　　　　　　　　　　　　　　　ease 默认。动画以低速开始，然后加快，在结束前变慢。　　　　　　　　　　　　　　　　ease-in 动画以低速开始。　　　　　　　　　　　　　　　　ease-out 动画以低速结束。　　　　　　　　　　　　　　　　ease-in-out 动画以低速开始和结束。　　　　　　　　　　　　　　　　cubic-bezier(n,n,n,n) 在 cubic-bezier 速度曲线函数中自己的值。可能的值是从 0 到 1 的数值。　　　　　　　　　　　　　　　　steps(n)逐步运动animation-delay 规定动画何时开始。默认是 0。animation-iteration-count 规定动画被播放的次数。默认是 1。（infinite无限次播放）animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。　　　　　　　　　　animation-direction 属性定义是否应该轮流反向播放动画。　　　　　　　　　　　 如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。　　　　　　　　　　　 注释：如果把动画设置为只播放一次，则该属性没有效果。

animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。（paused暂停）animation-fill-mode 规定对象动画时间之外的状态（规定动画在播放之前或之后，其动画效果是否可见。）。　　　　　　　　　　取值：forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。　　　　　　　　　　　　　backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。　　　　　　　　　　　　　both 向前和向后填充模式都被应用。demo:　　　　<style>        .box{            width:0;            height:0;            /*四个边框*/            border-left:100px dashed red;            border-top:100px dashed green;            border-right:100px dashed blue;            border-bottom:100px dashed orange;            border-radius: 50%;            /*使用动画集的名字*/            animation-name: rotate;            animation-duration: 2s;/*秒数*/            animation-iteration-count: 10;/*设置动画执行的次数*/            animation-timing-function: linear;/*匀速。设置速度的*/            animation-direction: alternate;/*动画逆播*/            animation-delay: 1s;/*延时*/            animation-fill-mode:forwards; /*动画结束了，保持最后一个属性值，但是不能是无限次播放*/　　　　　　　　　　 /*animation:rotate 2s 10 linear alternate 1s forwards;简写属性*/        }        .box:hover{            animation-play-state: paused;/*鼠标进入就停止了*/        }        /*定义一个动画集*/        /*@keyframes 动画集名字*/　　　　　　　@keyframes rotate{            0%{                transform:rotate(0deg);            }            100%{                transform:rotate(360deg);            }        }    </style></head><body>    <div class="box"></div></body>注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了

来源：https://www.cnblogs.com/qyuan/p/9455992.html

标签

css3动画

css

animation