CSS3动画相关知识点梳理(思维导图)

animation动画的示例代码：

<!-- html代码 -->
<div class="a-wrapper">
    <div class="animation"></div>
</div>

<!-- css代码 -->
/** animation **/
.a-wrapper{
  border:1px solid #ccc;
  width:300px;
  height:300px;
}
.animation{
  width:100px;
  height:100px;
  
  background:#666;
  border-radius:100%;
  color:#fff;
  animation: goldenlee 4s linear 0s infinite;
  background-color: #ccc;
}
.animation p{
  height:100px;
  line-height:100px;
  text-align:center;
}

@keyframes goldenlee{
  0% {
   
  }
  25% {
    margin-top:0;
    margin-left:200px;
    background:red;
    color:yellow;
  }
  50% {
    margin-left:200px;
    margin-top:200px;
    background:green;
    color:#fff;
    
  }
  75% {
    margin-left:0;
    margin-top:200px;
    background:blue;
   color:#fff;
  }
  100% {
    margin-left:0;
    margin-top:0;
    background:yellow;
    color:red;
  }
}

效果图如下：