大胆尝试 复杂动画效果

Posted on Edited on In

CSS3动画探秘：平时喜欢研究动效，下面来分析如何实现设计师的效果

点与线动效设计——作者：Vitaly Silkin

运动的小球

直线移动

直线运动，固定时间点颜色值变化。由于把时间拆分的很均匀，导致One球移动的不流畅

1
2
3
4
5
6
7
<div class="anim">
  <div class="ani colr1"></div>
  <div class="ani colr2"></div>
  <div class="ani colr3"></div>
  <div class="ani colr4"></div>
  <div class="ani colr5"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@keyframes colr1{
  0%{
    background: #ff9206;
  }
  12.5%{
    background: #ff6f22;
    transform: translate(60px);
  }
  25%{
    background: #ff4c41;
    transform: translate(120px);
  }
  37.5%{
    background: #ff2265;
    transform: translate(180px);
  }
  50%{
    background: #ff0a79;
    transform: translate(240px);
  }
  62.5%{
    background: #ff2265;
    transform: translate(180px);
  }
  75%{
    background: #ff4c41;
    transform: translate(120px);
  }
  87.5%{
    background: #ff6f22;
    transform: translate(60px);
  }
  100%{
    background: #ff9206;
  }
}

直线移动优化效果

优化效果

调整距离的控制，但随之而来的是时间的不固定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@keyframes colrT1{
  0%{
    background: #ff9206;
  }
  12.5%{
    background: #ff6f22;
    /*transform: translate(60px);*/
  }
  25%{
    background: #ff4c41;
    /*transform: translate(120px);*/
  }
  37.5%{
    background: #ff2265;
    /*transform: translate(180px);*/
  }
  50%{
    background: #ff0a79;
    transform: translate(240px);
  }
  62.5%{
    background: #ff2265;
    /*transform: translate(180px);*/
  }
  75%{
    background: #ff4c41;
    /*transform: translate(120px);*/
  }
  87.5%{
    background: #ff6f22;
    /*transform: translate(60px);*/
  }
  100%{
    background: #ff9206;
  }
}

选择方式优化

☻

运动的方块