SS动画特效

当我们在浏览一个网站的时候，总是发现一些有意思的特效，如鼠标放在文字上会跳动等等。对于CSS动画特效较差的同学和一些后端同学来实现这些功能，可能有些吃力了。

animate.css

animate.css是一个CSS动画库，他有我们常见的CSS动画。

animate.css使用方法

1.通过npm下载或者到animate.css官网或git上下载animate.css文件

2.将其引入到html页面中

3.为需要执行CSS动画的元素添加class类，其中animated 是必填的。其次到动画名称（选填）

下图是动画名称，动画主要分为几个大类，你可以注意到bonceln类的弹跳进场出场方式很容易记住。

这里填写一张class动画名称表

4.我们还可以添加delay-2s 延迟播放动画，即2秒后执行动画。

5.下面是代码的展示

总结

通过animate.css可以让我们开发页面的速度在动画特效上更加便捷高效了，不在需要自己从网上找案例然后慢慢的进行调试，测试。当然animate.css动画库的动画特效是大众特效，如果你需要设计更好看，效果更美的特效，这你只能自己查询网上资源自己慢慢测试了。使用animate.css可以让开发且美观都更快些。

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

说起CSS3动画，就必须说说 transform，translate，transition，animation这4个属性，transform主要定义元素的动作，比如旋转、倾斜、位移等，translate是transform里面的属性，用于2D/3D位移。后2个主要对动作进行描述，动画时间、速度曲线、次数等。

下面我用是一些简单的示例，让大家快速的入门上手:

快速开始第一个动画

<style>
.div1{
 width: 100px;
 background: red;
 /** 动画描述：宽度改变动画 用时 1s*/
 transition: width 1s;
}
.div1:hover{
 width: 200px;
 background: blue;
}
</style>

<div class="div1">动画</div>

这里hover事件时改变宽度和背景颜色，用transition来描述动画，由于我们只对width进行了描述，所以背景色，鼠标指上去，会立马变色，并不会有渐变的过程。

这里为什么用transition而不用animation？那就要说说他们直接的区别了。

transition需要触发一个事件， 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。

现在明白了吧，因为我们用的hover事件，所以要用transition。

下面请看第二个例子

快速开始第二个动画

<style>
.div1{
 width: 100px;
 background: red;
 /** 动画描述：宽度颜色改变动画 用时 1s infinite（无限次）*/
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 /**开始（可以用百分比表示）*/
 from {
 width: 100px;
 background: red;
 }
 /**结束（可以用百分比表示）*/
 to {
 width: 200px;
 background: blue;
 }
 /** or */
 /**开始*/
 0% {
 width: 100px;
 background: red;
 }
 /**中间可以加多个区间*/
 /**结束*/
 100% {
 width: 200px;
 background: blue;
 }
}
</style>

<div class="div1">动画</div>

这里动画从加载就开始执行，所以用了animation，改变宽度和背景色，用时1s，并且无限次循环执行。@keyframes规则是创建动画。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用于兼容不同浏览器。

快速开始第三个动画

<style>
.div1{
 width: 100px;
 background: red;
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 100% {
 transform: rotate(20deg);
 }
}
</style>

<div class="div1">动画</div>

transform：rotate使其div元素2D旋转20°.当然你可以设置transform：rotateY, Y 轴的 3D 旋转。

你还可以设置transform: translate，进行2D，3D位移；

transform: scale，进行2D，3D缩放；

transform: skew，进行2D倾斜等等。

总结

好的动画效果，第一要素是：好的想法，有创意，才有好的成品；第二要素是：有好的实现解题思路，当有设计后，制作就需要想办法实现效果，剥茧抽丝，一步一步来；第三要素：不畏惧的心，勇敢尝试，多实践，多动手，灵感往往来与你写的过程中。

有了上面的小示例，相信小伙伴们也能自己写写简单的CSS3动画了，如果有疑问，可以评论留言，大家一起学习探讨。

击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

在移动端开发中，经常会使用到loading动画，然而，实现 loading动画的方式也很多，loading的展示样式就更多了。今天这里我来展示一下其中一种有意思的loading动画。看我怎么搞。

先看一下大概的效果图：

对就是上面展示的这样子。看起来像个闹钟在旋转似的。

其实现原理很简单的：

1、将圆分为左右两个半圆作为显示区域，溢出隐藏掉。

2、分别在左右半圆中绘制一个相同大小的半圆，将填充背景色，以供旋转使用。

3、根据需要旋转有背景色的半圆即可。

下面看一下具体实现的技术点：

一、dom结构

这个结构也很简单，div.loading是相对定位，直接子元素div.left和div.right是绝对定位，设置成溢出隐藏，最后来旋转i.bg。

二、动画的设定

如上所示：动画设定需要注意，旋转的中心点。左右两边不一样。

三、完美衔接

为了让左右两模块完美的衔接上， 需要左边的旋转背景加一个1s的延迟（根据总的时间定）。

最后总结：

css3的动画属性好好组合利用，能够实现好多有意思的效果。重要的是要学会利用这些看着有限的知识点来解决工作中碰到的各种问题。