关于CSS3动画效果背后的实现

[lulujianglab]

我相信很多前端开发人员都有用CSS3写过动画的经历，甚至创建过一些比较复杂的2D或3D动画效果

在这篇文章，主要通过案例来介绍一些常见的CSS3的动画属性

先来看下常见的CSS3的动画属性都有哪些

转换transform

.box {
     width: 200px;
     height: 200px;
     background-color: red;
     transform: translate(400px);
     transform: rotate(45deg);
     transform: scale(2);
}
.box:hover {
     transform: rotate(720deg) scale(2);
}
.....

<div class="box"></div>

过渡transition

.box {
     width: 200px;
     height: 200px;
     background-color: red;
     transition-property: all; 
     transition-delay: 1s;
     transition-duration: 4s;
     transition-timing-function: linear;
     /*transition: all 4s 1s linear*/
}
.box:hover {
     transform: rotate(720deg) scale(2);
}
.....
```html
<div class="box"></div>

animation动画

.box {
     width: 200px;
     height: 200px;
     background-color: red;
     animation-name: box;
     animation-duration: 4s;
     animation-delay: 1s;
     animation-timing-function: linear;
     animation-iteration-count: 1;
     animation-fill-mode: both;
     /*animation: box 4s 1s linear 1 both;*/
}
@keyframes box {
     0%{
         width: 0;
      }
      25%{
          width: 200px;
       }
       50%{
           width: 400px;
       }
       5%{
           width: 600px;
        }
        100%{
            width: 800px;
        }
 }
.box:hover {
     animation-play-state: paused;
}
.....

<div class="box"></div>

综合案例可以参考demo