Animate.css动画库的源码分析（大部分都是CSS3.0动画的使用）

由于工作中，时常有的时候需要用到动画特效，自己本身也对CSS3.0的很多动画感兴趣，所以也是不是写一写原始的动画特效，在github上有一个工作中总结的上千种动画特效：点击打开链接，欢迎关注和star。那接下来我们看看我在工作中使用到的这个插件的用法。对于这款动画集合库，网上有大量的教程告诉我们怎么使用它。

首先就是引入我们的Animate.css文件到我们HTML中，然后在要有效果的DOM元素上添加动画样式，首先必须说明的是在每个动画的样式上，都要加入最原始的一个样式animated，然后再加上你需要的动画的样式，有这两个样式，DOM就会有对应的动画效果。

一般我们项目中都是通过jQuery或者原生获取dom的方式获取到dom元素，然后就是通过上述所说的方式给其添加动画。那么接下来我们看看他的源码：其实内部主要是对每个动画名称制作css动画，因为涉及到兼容性问题，所以他添加了很多兼容性的代码，主要是做了谷歌方面的前缀。不过我觉得兼容性越来越不重要。所以我们可以在工作中书写自己的动画库。下面我们看看源码：

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;   //定义一个运动周期的时间-webkit-animation-fill-mode: both;animation-fill-mode: both; //其动画的可见性
}

.animated.infinite {-webkit-animation-iteration-count: infinite;   animation-iteration-count: infinite    //规定动画可以无限次播放
}

主要上述两行代码，对我们的很多动画的初始进行了设置，接下来大部分的代码基本围绕的就是animation动画过程中各个阶段的设置了，使用了css3.0的@keyframes，将css的一种装态逐渐进入另一种状态。使用的是百分比来对整个动画的过程进行精确的设置，使得动画可以掌控在我们手中，我们可以对于动画的每个状态进行控制。其实想要理解其中源代码的含义，大家首先要对css3.0的使用有一定的了解。最起码对于他的很多移动和翻转，延迟，持续时间等等很多特性有了解，这样我们再看它的源码就会很快理解，甚至可以书写出自己想要的个性化的动画。那我们拿出一款样式来具体分析一下，看看到底是如何书写源码的，一个懂了，那么我们对于整个库的代码都会有很大的提升。

@keyframes bounce {0%,100%,20%,53%,80% {-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);transition-timing-function: cubic-bezier(0.215,.61,.355,1);  //动画的效果，这里使用了贝塞尔曲线-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0)   //从最初始的状态}40%,43% {-webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);transition-timing-function: cubic-bezier(0.755,.050,.855,.060);-webkit-transform: translate3d(0,-30px,0);-ms-transform: translate3d(0,-30px,0);transform: translate3d(0,-30px,0)  //Y轴方向移动-30px，就是向上移动到30px}70% {-webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);transition-timing-function: cubic-bezier(0.755,.050,.855,.060);-webkit-transform: translate3d(0,-15px,0);-ms-transform: translate3d(0,-15px,0);transform: translate3d(0,-15px,0)   //Y轴方向移动-15px，就是向上移动到15px，也就是向下回落}90% {-webkit-transform: translate3d(0,-4px,0);-ms-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0)//Y轴方向移动-5px，就是向上移动到5px，也就是向下回落，然后回到原点}
}

从上面的代码中，我们可以看到使用了css3.0的 transform: translate3d的属性。无非是在运动效果的时候使用了贝塞尔曲线，如果大家对这个感兴趣可以看看这个网址点击打开链接，可以自己实际体验一下贝塞尔曲线的轨迹。我给大家截个图，方便大家学习。

这样我们就对一个简单的上下运动就分析完了。虽然大家感觉很简单，说实话，本身代码也并不是很难，书写的都是我们常用的代码，无非是它结合了很多数学中的运动，把我们的动画做得更加流畅。其他的就是多书写几份这样的代码，主要是考虑到兼容性的问题。接下来我把自己所做的一个完整的实例，给大家参考：放在我的github上面点击打开链接，方便大家一起学习.....与所有前端爱好者共勉......

Animate.css动画库的源码分析（大部分都是CSS3.0动画的使用）相关推荐

animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
animate.css 动画库的使用
安装 npm install animate.css --save 在线文档 animate.css官方在线文档参考文章文章1@农药啊文章2@zxy_aabbcc 文章3@Suwanbin vu ...
vue 使用animate.css动画库
vue 2示例 `先下载` `在 main.js中将Animate.css库导入到您的项目中,即在其中添加如下代码`==(切记两个都要引入不然没有效果下面的css是自己封装的动画时间效果之类的)= ...
【jdk源码分析】ArrayList的size()==0和isEmpty()
先看结果分析源码 [jdk源码解析]jdk8的ArrayList初始化长度为0 java的基本数据类型默认值无参构造 size()方法 isEmpty()方法转载于:https://www.cn ...
animate.css 动画库的下载与使用
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址
使用animate.css动画库出现窗口抖动
主要思路是应该是大盒子内容太多把容器撑开出现的窗口抖动问题解决方法给父容器加overflow: hidden;也能实现bfc样式隔离
Android基础-Facebook Rebound 弹性动画库源码分析
Facebook Rebound 弹性动画库源码分析设计的时候老是闲动画太生硬,于是找到了这个弹性动画.这个弹性动画是facebook开源的,Rebound项目地址:https://github. ...

Animate.css动画库的源码分析（大部分都是CSS3.0动画的使用）

Animate.css动画库的源码分析（大部分都是CSS3.0动画的使用）相关推荐

最新文章

热门文章