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

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的格式制作一些其他效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Guangdong Qi

iPhone X 适配指南 (官方翻译版)

21550
来自专栏Nian糕的私人厨房

Vue2.0 歌手列表滚动及右侧快速入口实现

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

17350
来自专栏JadePeng的技术博客

jQuery Mobile 教程 (1)

    移动互联网是块诱人的大蛋糕,在手机屏上,到底是C/S横扫一切,还是B/S力争一席之地?我相信,B/S还是很有希望的。在找移动Web App开发的资料,发...

38760
来自专栏xingoo, 一个梦想做发明家的程序员

CSS布局那点事儿

布局 最开始老的一代网站开发,布局都是通过表格实现的。 这样可以形成规整的网格布局,但是也会带来一定的复杂性。比如想要新增某个页面元素,就有可能要改动整个表格...

25350
来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

20410
来自专栏OpenApplus

小程序应用中WebView中原生组件限制问题解析

在微信的文档中有一个章节说明了『 [原生组件的使用限制](https://developers.weixin.qq.com/miniprogram/dev/co...

29300
来自专栏向治洪

react-native-android之初次相识

作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒。 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开...

19960
来自专栏有趣的django

微信小程序实战–集阅读与电影于一体的小程序项目(三)

在文章详情页,点击播放音乐后,然后返回到文章列表页,再进到详情页,发现播放按钮是暂停状态,这是因为应用程序存在生命周期,下面就解决这个问题。

24230
来自专栏编程微刊

当鼠标聚焦时输入框变色(focus事件实例)

61620
来自专栏Guangdong Qi

iOS开发常用之 HUD 弹窗

74820

扫码关注云+社区

领取腾讯云代金券