自定义swiper动画之实现两段动画效果
自定义swiper动画之实现两段动画效果
WindCoder
发布于 2018-09-20 15:59:15
发布于 2018-09-20 15:59:15
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。但若是一个元素需要两个甚至多个动画等样式时，原本的动画特效便难以满足需求了，毕竟一个元素只能加一个特效，对于多余的，后者会把前者覆盖。
搜了好久解决办法，唯一有用的只有Swiper中文网论坛中的一句“只需要将两段动画在animate.css中的动画定义拼接起来即可。当然要修改行进轨迹，就是那个百分比啦”。
对于初次接触的小白来说，还是不太容易理解的。折腾了一段时间，偶然灵光一闪，体会到了其中的深刻含义，放于此处，与大家共享。
此处代码为向上渐入特效（fadeInUp）与晃动特效（shake）的结合。
@-webkit-keyframes fadeInUpS {
//渐入特效
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
//晃动特效
50%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes fadeInUpS {
//渐入特效
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
//晃动特效
50%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.fadeInUpS {
-webkit-animation-name: fadeInUpS;
animation-name: fadeInUp;
}进行轨迹（百分比）即每段特效“{”前面的百分数，也可以说成0-百分之几（如本例中的50%）时运行某一特效（如本例中0-50%时运行渐入）。具体的可以仿照animate.css的格式制作一些其他效果。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-05-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读