【CSS 】动画animation

作为博主简单记录：深入学习请查看文末参考资料

前面有提到过过渡效果css transition,实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且过渡中我们可能需要其他精细操作办不到，这个时候我们需要用到animation了。
举个简单的例子:

<!DOCTYPE html>
<html>
<head>
<style> 

@keyframes changeColor {
    from {background-color:lightseagreen}
    to {background-color:indianred}
}


div.color-change-target {
    background-color: lightseagreen;
    width:50px;
    height: 50px;
    border-radius: 25px;
    animation: changeColor 5s ease-in-out 2s infinite ;
    margin: 10px auto;
}
div.color-change-target2 {
    background-color: lightseagreen;
    width:50px;
    height: 50px;
    border-radius: 25px;
    /*animation: changeColor 5s ease-in-out 2s 1 ;*/
    margin: 10px auto;
}
div.color-change-target2:hover {
    background-color:indianred;
    transition: background-color 5s
}
</style>
</head>
<body>

<div class="anitation">
    <div class="color-change-target"></div>
    <div class="color-change-target2"></div>
</div>

</body>
</html>

请尝试上面的代码,你会发现 hover 到第二个类名为color-change-target2 的div上的时候背景颜色的变化和第一个div 在页面载入2s之后的背景颜色变化一模一样。

好的我们直接根据上面的代码来，@keyframes 关键字，这个关键字可以定义在这个过渡转换中从0-100 【这里0是转换开始，100是转换结束】这个过程中每一步的变化。实际上上面定义changeColor的代码可以写成这样,他们是等价的：

@keyframes changeColor {
    0% {background-color:lightseagreen}
    100% {background-color:indianred}
}

我们进一步修改代码：

 @keyframes changeColor {
    0% {background-color:lightseagreen}
    50% {background-color:indianred; border-radius: 0}
    100% {background-color:lightseagreen;border-radius: 25px}
}

刷新页面你会看到，在变化的这5s内在第2.5s时,圆角不在变成了矩形，并且背景颜色变成了红色。
当然你在定义的时候,完全可以设定1% 2% 3%…..并且设定不同属性组合。当然这里面的css属性和 transition支持的属性是一模一样，也就是说这些属性(传送门)被设定才会有动画效果。 MDN 参考

animation 和 transition一样是一些列属性的简写形式.
你可以加上试试这个效果：

  .circle {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      background-color:aquamarine;
      margin-bottom: 30px;
      margin-left: 30px;
      animation:  scaling 1s infinite ease-in-out;
  }

  @keyframes scaling{
    0%{
      opacity:0.3;
      transform: scale(1,1);
      box-shadow: 0px 0px 0px mediumseagreen;
    }
    100%{
      opacity:1;
      transform: scale(1.2,1.2);
      box-shadow: 0px 0px 10px mediumseagreen;
    }
  }

深入学习请狠狠的点击这个：
大漠老师 CSS3 animation
w3c animation
MDN animtaion

posted on 2017-01-01 17:25 狂奔的冬瓜阅读(214) 评论(0) 编辑收藏举报