CSS3 @keyframes 规则

   今天来给大家分享一下CSS3 @keyframes 规则！

　　在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画

　　

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

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

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

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

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

 

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

　　通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

　　注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

实例

　　1.当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

　　HTML:

　　　　　　<div></div>

　　CSS:　

　　　　div

　　　　{
    　　　　width:100px;
    　　　　height:100px;
    　　　　background:red;
   　　 　　animation:myfirst 5s;
   　　 　　-moz-animation:myfirst 5s; /* Firefox */
    　　　　-webkit-animation:myfirst 5s; /* Safari and Chrome */
    　　　　-o-animation:myfirst 5s; /* Opera */
　　　　}

　　@keyframes myfirst
　　　　{
 　　　   　0%   {background:red;}
  　　  　　25%  {background:yellow;}
    　　　　50%  {background:blue;}
    　　　　100% {background:green;}
　　　　}
　　　　
　　2.这个例子是让一个正方形上下楼梯的一个动画效果，有兴趣的可以试试哦！
　　
　　html:

　　　　<div id="box">
   　　　　 <div id="div1"></div>
    　　　　<div id="div2"></div>
    　　　　<div id="div3"></div>
   　　　　 <div id="div4"></div>
　　　　</div>

　　CSS:

　　　　#box{
       　　 position: relative;
        　　width: 600px;
        　　height: 600px;
       　　 background: black;
   　　 }
    　　#div1{
       　　 position: absolute;
        　　width: 50px;
        　　height: 50px;
       　　 background: red;
       　　 right: 150px;
        　　bottom: 0;
        　　animation:yd 10s linear infinite alternate;
   　　 }
    　　@keyframes yd {

            0%{
                transform: translate(0)
            }
            16%{
                transform: translateY(-50px);
            }
            32%{
                transform: translateY(-50px) translateX(50px);
            }
            48%{
                transform: translateY(-100px) translateX(50px);
            }
            65%{
                transform: translateY(-100px) translateX(100px);
            }
            82% {
                transform: translateY(-150px) translateX(100px);
            }
            100%{
                transform: translateY(-150px) translateX(150px);
            }
   　　 }
    　　#div2{
      　　  bottom: 0;
        　　right: 0;
       　　 position: absolute;
       　　 width: 150px;
       　　 height: 50px;
        　　background: yellow;
   　　 }
   　　 #div3{
       　　 bottom: 50px;
       　　 right: 0;
       　　 position: absolute;
       　　 width: 100px;
       　　 height: 50px;gei
      　　  background: yellow;
  　　  }
   　　 #div4{
       　　 bottom: 100px;
       　　 right: 0;
       　　 position: absolute;
       　　 width: 50px;
       　　 height: 50px;
       　　 background: yellow;
  　　  }

在此我还给大家列出了 @keyframes 规则和所有动画属性：

　

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

　　　　　　想要了解更多快来多多关注我！