自定义swiper动画之实现两段动画效果

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。但若是一个元素需要两个甚至多个动画等样式时，原本的动画特效便难以满足需求了，毕竟一个元素只能加一个特效，对于多余的，后者会把前者覆盖。搜了好久解决办法，唯一有用的只有Swiper中文网论坛中的一句“只需要将两段动画在animate.css中的动画定义拼接起来即可。当然要修改行进轨迹，就是那个百分比啦”。对于初次接触的小白来说，还是不太容易理解的。折腾了一段时间，偶然灵光一闪，体会到了其中的深刻含义，放于此处，与大家共享。此处代码为向上渐入特效（fadeInUp）与晃动特效（shake）的结合。

1
@-webkit-keyframes fadeInUpS {
2
//渐入特效
3
  0% {
4
    opacity: 0;
5
    -webkit-transform: translate3d(0, 100%, 0);
6
    transform: translate3d(0, 100%, 0);
7
  }
8

9
  50% {
10
    opacity: 1;
11
    -webkit-transform: none;
12
    transform: none;
13
  }
14
//晃动特效
15
  50%, 100% {
16
    -webkit-transform: translate3d(0, 0, 0);
17
    transform: translate3d(0, 0, 0);
18
  }
19

20
 70%, 90% {
21
    -webkit-transform: translate3d(-10px, 0, 0);
22
    transform: translate3d(-10px, 0, 0);
23
  }
24

25
  60%, 80% {
26
    -webkit-transform: translate3d(10px, 0, 0);
27
    transform: translate3d(10px, 0, 0);
28
  }
29
}
30

31
@keyframes fadeInUpS {
32
//渐入特效
33
  0% {
34
    opacity: 0;
35
    -webkit-transform: translate3d(0, 100%, 0);
36
    transform: translate3d(0, 100%, 0);
37
  }
38

39
  50% {
40
    opacity: 1;
41
    -webkit-transform: none;
42
    transform: none;
43
  }
44
//晃动特效
45
  50%, 100% {
46
    -webkit-transform: translate3d(0, 0, 0);
47
    transform: translate3d(0, 0, 0);
48
  }
49

50
   70%, 90% {
51
    -webkit-transform: translate3d(-10px, 0, 0);
52
    transform: translate3d(-10px, 0, 0);
53
  }
54

55
  60%, 80% {
56
    -webkit-transform: translate3d(10px, 0, 0);
57
    transform: translate3d(10px, 0, 0);
58
  }
59
}
60

61
.fadeInUpS {
62
  -webkit-animation-name: fadeInUpS;
63
  animation-name: fadeInUp;
64
}

进行轨迹（百分比）即每段特效“{”前面的百分数，也可以说成0-百分之几（如本例中的50%）时运行某一特效（如本例中0-50%时运行渐入）。具体的可以仿照animate.css的格式制作一些其他效果。

自定义swiper动画之实现两段动画效果

支持一下

评论