CSS3动画属性之Animation

首先定义一个动画规则：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

　　然后在一个元素中使用该动画规则：

 div {
     width: 50px;
     height: 50px;
     top: 100px;
     background: blue;
     -webkit-animation-name:'mymove';/*动画属性名，也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 10s;/*动画持续时间*/
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
     -webkit-animation-delay: 2s;/*动画延迟时间*/
     -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
     -webkit-animation-direction: alternate;/*定义动画方式*/
  }

在定义动画规则的地方，from代表开始运行时状态，to代表动画结束时的状态，需要注意的是：from和to只是代表动画开始与结束时的动画，在动画结束后from和to里面的css样式对使用

该动画规则的元素不影响，也就是说不管你的规则中设置了什么样式，当动画结束后，元素的样式还是会回到执行动画前的样子，就拿上面的例子说吧，一开始我以为动画结束后元素的样式就

变成动画规则里面的to里面的样式了，其实不是这样的，找两个例子是一下就知道了

如果这个规则只有from和to是不是显得有点过于鸡肋，其实官方文档中并不推荐使用from和to ，而是用0%代替动画开始100%代替动画结束（百分号不能省略）

除了定义开始和结束，自然少不了一些中间的过渡，所以你可以在0%到100%中间定义若干个帧，比如下面这样定义规则：

  @-webkit-keyframes 'mymove' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

animation属性不需要触发，页面加载完成立即执行，可以使用animation-delay来延迟执行

秒客网

CSS3动画属性之Animation

相关文章