SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit&的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
　　Loading 动画效果一
　　HTML 代码：
&div class=&spinner&&
&div class=&rect1&&&/div&
&div class=&rect2&&&/div&
&div class=&rect3&&&/div&
&div class=&rect4&&&/div&
&div class=&rect5&&&/div&
　　CSS 代码：
.spinner {
margin: 100
height: 60
text-align:
font-size: 10
.spinner & div {
background-color: #67CF22;
height: 100%;
display: inline-
-webkit-animation: stretchdelay 1.2s infinite ease-in-
animation: stretchdelay 1.2s infinite ease-in-
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
　　Loading 动画效果二
　　HTML 代码：
&div class=&spinner&&&/div&
　　CSS 代码：
.spinner {
height: 60
background-color: #67CF22;
margin: 100
-webkit-animation: rotateplane 1.2s infinite ease-in-
animation: rotateplane 1.2s infinite ease-in-
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg)
rotateX(180deg) }
@keyframes rotateplane {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
　　Loading 动画效果三
　　HTML 代码：
&div class=&spinner&&
&div class=&double-bounce1&&&/div&
&div class=&double-bounce2&&&/div&
　　CSS 代码：
.spinner {
height: 60
margin: 100
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
-webkit-animation: bounce 2.0s infinite ease-in-
animation: bounce 2.0s infinite ease-in-
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
transform: scale(1.0);
-webkit-transform: scale(1.0);
　　Loading 动画效果四
　　HTML 代码：
&div class=&spinner&&
&div class=&cube1&&&/div&
&div class=&cube2&&&/div&
　　CSS 代码：
.spinner {
margin: 100
height: 32
.cube1, .cube2 {
background-color: #67CF22;
height: 30
-webkit-animation: cubemove 1.8s infinite ease-in-
animation: cubemove 1.8s infinite ease-in-
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
@keyframes cubemove {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
　　Loading 动画效果五
　　HTML 代码：
&div class=&spinner&&
&div class=&dot1&&&/div&
&div class=&dot2&&&/div&
　　CSS 代码：
.spinner {
margin: 100
height: 90
text-align:
-webkit-animation: rotate 2.0
animation: rotate 2.0
.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-
background-color: #67CF22;
border-radius: 100%;
-webkit-animation: bounce 2.0s infinite ease-in-
animation: bounce 2.0s infinite ease-in-
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
transform: scale(1.0);
-webkit-transform: scale(1.0);
　　Loading 动画效果六
　　HTML 代码：
&div class=&spinner&&
&div class=&bounce1&&&/div&
&div class=&bounce2&&&/div&
&div class=&bounce3&&&/div&
　　CSS 代码：
.spinner {
margin: 100px auto 0;
width: 150
text-align:
.spinner & div {
height: 30
background-color: #67CF22;
border-radius: 100%;
display: inline-
-webkit-animation: bouncedelay 1.4s infinite ease-in-
animation: bouncedelay 1.4s infinite ease-in-
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode:
animation-fill-mode:
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
transform: scale(1.0);
-webkit-transform: scale(1.0);
　　Loading 动画效果七
　　HTML 代码：
&div class=&spinner&&&/div&
　　CSS 代码：
.spinner {
height: 40
margin: 100
background-color: #333;
border-radius: 100%;
-webkit-animation: scaleout 1.0s infinite ease-in-
animation: scaleout 1.0s infinite ease-in-
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0.0) }
-webkit-transform: scale(1.0);
opacity: 0;
@keyframes scaleout {
transform: scale(0.0);
-webkit-transform: scale(0.0);
transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity: 0;
　　Loading 动画效果八
　　HTML 代码：
&div class=&spinner&&
&div class=&spinner-container container1&&
&div class=&circle1&&&/div&
&div class=&circle2&&&/div&
&div class=&circle3&&&/div&
&div class=&circle4&&&/div&
&div class=&spinner-container container2&&
&div class=&circle1&&&/div&
&div class=&circle2&&&/div&
&div class=&circle3&&&/div&
&div class=&circle4&&&/div&
&div class=&spinner-container container3&&
&div class=&circle1&&&/div&
&div class=&circle2&&&/div&
&div class=&circle3&&&/div&
&div class=&circle4&&&/div&
　　CSS 代码：
.spinner {
margin: 100
height: 20
.container1 & div, .container2 & div, .container3 & div {
background-color: #333;
border-radius: 100%;
-webkit-animation: bouncedelay 1.2s infinite ease-in-
animation: bouncedelay 1.2s infinite ease-in-
-webkit-animation-fill-mode:
animation-fill-mode:
.spinner .spinner-container {
width: 100%;
height: 100%;
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
transform: scale(1.0);
-webkit-transform: scale(1.0);
验证消息：Admin10000
提示：常上QQ空间的朋友可关注，精彩内容不错过。
理智评论文明上网，拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心css3的基础用法，新手必看哈（还有css3和jquery动画的对比） - 推酷
css3的基础用法，新手必看哈（还有css3和jquery动画的对比）
定义动画，名字可以各种起，就像方法名一样
1. 定义动画，名称为fadeIn
@-webkit-keyframes fadeIn {
opacity: 0; /*初始状态 透明度为0*/
opacity: 0; /*中间状态 透明度为0*/
opacity: 1; /*结尾状态 透明度为1*/
方法里面还有很多写法：
/* 定义css方法，名字叫消失 Hides a leaf towards the very end of the animation */
@-webkit-keyframes fade
/* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
{ opacity: 1; } /*初始状态 透明度为1*/
{ opacity: 1; }/*中间状态 透明度为1*/
100% { opacity: 0; }/*结尾状态 透明度为0*/
/*& 定义方法叫下降 Makes a leaf fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop
/* Move a leaf to -300 pixels in the y-axis at the start of the animation */
0%&& { -webkit-transform: translate(0px, -50px); }/* 下降的初始，设置元素的位置，元素x方向位移a，y方向位移b */
/* Move a leaf to 600 pixels in the y-axis at the end of the animation */
100% { -webkit-transform: translate(0px, 1136px); }/* 下降的结束时，设置元素的位置，元素x方向位移a，y方向位移b */
/* 定义一个方法叫顺时针 Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
0%&& { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
/* 定义一个方法叫逆时针 Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip
0%&& { -webkit-transform: scale(-1, 1) rotate(50deg); }
100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
是方法里面要执行什么，执行的动画效果有几个关键词：transform&& transition&& animation
这些方法里面的内容，实际上都要参考这个：
设置元素顺时针旋转的角度，用法是：
transform: rotate(x);
参数x必须是以deg结尾的角度数或0，可为负数表示反向。
设置元素放大或缩小的倍数，用法包括：
transform: scale(a); & & & & & & & & &元素x和y方向均缩放a倍
transform: scale(a, b);&&&&&&&&&&&&& 元素x方向缩放a倍，y方向缩放b倍
transform: scaleX(a);&&&&&&&&&&&&&&& 元素x方向缩放a倍，y方向不变
transform: scaleY(b);&&&&&&&&&&&&&&& 元素y方向缩放b倍，x方向不变
设置元素的位移，用法为：
transform: translate(a, b); & & & & & & & &元素x方向位移a，y方向位移b
transform: translateX(a);&&&&&&&&&&&&&&&&& 元素x方向位移a，y方向不变
transform: translateY(b);&&&&&&&&&&&&&&&&& 元素y方向位移b，x方向不变
设置元素倾斜的角度，用法包括：
transform: skew(a, b);&&&&&&&&&&&&& 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b
transform: skewX(a);&&&&&&&&&&&&&&& 元素x方向逆时针倾斜角度a，y方向不变
transform: skewY(b);&&&&&&&&&&&&&&& 元素y方向顺时针倾斜角度b，想方向不变
以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。
设置元素的变形
，因为矩阵变形过于复杂，暂略。
设置元素的悬挂点，用法包括：
transform-origin:&&&&&&&&&&&&&&& 元素的悬挂点为(a, b)
元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。
transition
transition-property
指定transition效果作用的CSS属性，其值是CSS属性名。
transition-duration
动画效果持续的时间，其值为以s结尾的秒数。
transition-timing-function
指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：
transition-delay
动画效果推迟开始执行的时间，其值为以s结尾的秒数。
CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的
效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key &frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。
关键帧@keyframes的语法结构如下：
@keyframesNAME {
/*CSS属性*/
/*CSS属性*/
NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中时无序的。
设置完关键帧后就可以继续设定animation了。
animation-name
指定选用的动画的名字，即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。
animation-direction
执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。
因为CSS3还没有正式发布，所以各种
对它的支持也不尽相同。所以在设置CSS3属性（包括@开头的新属性）的时候通常需要对其添加浏览器标识的前缀，如-webkit- 表示Webkit内核的浏览器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。无视IE吧，在IE上的实现通常还是要用到滤镜，而不是CSS3。
最后，要给div元素用上：如下
在ID或类中增加如下的动画代码
{-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/}
通过上面的代码即可实现淡入淡出的动画效果，代码具体的含义已在注释中注明。
#leafContainer & div
width: 100
height: 100
/* We use the following properties to apply the fade and drop animations to each leaf.
Each of these properties takes two values. These values respectively match a setting
for fade and drop.
-webkit-animation-name: fade, /*动画名称*/
-webkit-animation-iteration-count: infinite,
-webkit-animation-direction: normal,/* 设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放） */
-webkit-animation-timing-function: linear, ease-/* 变化速率函数，取的是贝塞尔曲线，这个是匀速，加速 */
#leafContainer & div & img {
width: 100
height: 100
-webkit-animation-name: fade, /*动画名称*/
-webkit-animation-iteration-count:/* 设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。 */
-webkit-animation-direction:/* 设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放） */
-webkit-animation-timing-function: ease-in- /* 变化速率函数，取的是贝塞尔曲线，这个是加速再减速 */
-webkit-transform-origin: 50% -100%;/* 元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。这里像个钟摆 */
有一些参考代码：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
&html xmlns=&&&
&meta http-equiv=&Content-Type& content=&text/
; charset=utf-8& /&
&title&CSS3动画&/title&
=&text/css& rel=&stylesheet& /&
&&/p&& p&&body&
&div class=&rotate&&rotate&/div&
&div class=&scale&&scale&/div&
&div class=&translate&&translate&/div&
&div class=&skew&&skew&/div&
&div class=&origin&&origin&/div&
&div class=&single&&single property&/div&
&div class=&whole&&whole property&/div&
&div class=&resume&&change & resume&/div&
&div class=&animation&&animation&/div&
animation.css
height: 30
line-height: 30
text-align:
background: #06F;
font-family: Arial, Helvetica, sans-
-webkit-border-radius: 10
}&/p&& p&.rotate {
-webkit-transform: rotate(0deg);
}&/p&& p&.rotate:hover {
-webkit-transform: rotate(90deg);
}&/p&& p&.scale {
-webkit-transform: scale(1);
}&/p&& p&.scale:hover {
-webkit-transform: scale(1.5);
}&/p&& p&.translate {
-webkit-transform: translate(0px, 0px);
}&/p&& p&.translate:hover {
-webkit-transform: translate(50px, 50px);
}&/p&& p&.skew {
-webkit-transform: skew(0);
}&/p&& p&.skew:hover {
-webkit-transform: skewY(20deg);
}&/p&& p&.origin {
-webkit-transform-origin:
-webkit-transform: rotate(0);
}&/p&& p&.origin:hover {
-webkit-transform: rotate(45deg);
}&/p&& p&.single {
width: 150
}&/p&& p&.single:hover {
background: #f00;
width: 200
height: 100
line-height: 100
-webkit-transition-property:
-webkit-transition-duration: 2s;
}&/p&& p&.whole {
width: 150
}&/p&& p&.whole:hover {
width: 200
height: 100
line-height: 100
background: #f00;
-webkit-transition-duration: 2s;
}&/p&& p&.resume {
width: 150
-webkit-transition-duration: 2s;
}&/p&& p&.resume:hover {
width: 200
height: 100
line-height: 100
background: #f00;
-webkit-transition-duration: 2s;
}&/p&& p&.animation:hover {
-webkit-animation-name:
-webkit-animation-duration: 2s;
-webkit-animation-timing-function:
-webkit-animation-direction:
-webkit-animation-iteration-count:
}&/p&& p&@-webkit-keyframes anim {
height: 30
line-height: 30
background: #06F;
width: 140
height: 65
line-height: 65
background: #360;
width: 200
height: 100
line-height: 100
background: #f00;
关于css3动画和jquery的动画的优劣对比：
CSS3动画提供了2D和3D以及常规动画属性接口，它可以工作在页面的任何一个元素的任意一个属性，
是利用C语言编写的，它是系统层面的动画，因此它的效率绝对的高于js模拟的动画，真的就是这样吗？
经过我们的测试发现CSS3动画与javascript模拟动画有以下区别：
1＼ CSS 3D动画在js中无法实现；
CSS3的3D动画是CSS3中非常强大的功能，因为它的工作原理是在一个三维的空间里，因此js是无法模拟出像CSS3那样的3D动画，当然这个3D动画的实际应用场景是否很广，值得思考……
2＼ CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画；
CSS3的2D动画是指是2D矩阵Transform变化，比如缩放＼变形＼x轴＼y轴，js当然是不能做变形动画的。就拿坐标动画来说，经过我们的测试发现使用CSS3的transform做translateXY动画比js中的position left，position right快了近700mm!而且视觉上也比js动画流畅很多。
3＼ CSS3其它常规动画属性的效率均低于js模拟的动画;
常规动画属性在这里是指：height，width,opacity,border-width,color…..
我们曾在Android HTC中测试将一个DOM元素从height:0改变为height:100，我们使用了jQuery animate和CSS3的transition以及animation，结果表明：CSS3的tansition和animation均慢于jQuery animate 500mm！其它的常规动画属性均慢于jQuery animate 400-500mm!。
以上是我们就CSS3动画和jQuery动画做过的一些简单的测试，我们希望您也能够在评论中列出您的测试结果。下面我们再来看看动画事件。
每在页面执行一次动画时，都应该带有至少两个事件animationStart和animationEnd有的可能还需要animationDuration，在手机上我们不推荐animationDuration，本来效率就已经非常低了，尽量不要在动画执行期间还做其它的事件。
用js模拟动画，需要开发者编写这些动画事件的接口，以便更好的做下一步的工作，而CSS3动画不需要开发者编写这些事件接口，浏览器本身就已经提供了，拿webkit内核的浏览器举例，它提供了webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnimationDuration,webkitAnimationEnd事件接口，开发者可以很方便的使用这些事件。
通过上面的讨论我们可以发现一个结果：
至于采用js动画还是css3动画，需要开发者根据不同的需求做出不同的抉择，但应该遵循一个基本的原则是：
如果你需要做2D动画，请勿必使用CSS3的transition或animation。
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见&& 和我一起玩转CSS3 Animate动画 (第一节)
&& 和我一起玩转CSS3 Animate动画 (第一节)和我一起玩转CSS3 Animate动画 (第一节)Views 2096
很炫,很流畅我们在移动设备上大部分都是用它来完成各种交互动画特效,我们今天为大家做一些基础的动画教程，希望能对您使用动画有所帮助！在教程开始之前 先说一下 今天的动画环境主要是用的 bootstrap 的弹窗做演示 这样更方便你了解这个动画的定义以及如何使用在什么环境中使用！你可以先准备bootstrap的环境方便和我一起做！CSS3动画 -- 简单的 左右渐隐渐显效果先看看DEMO具体效果 (请使用现代浏览器预览) 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 欢迎观看本教程! 更多更好的教程尽在 一流前端 请记住我们的网站 效果还不错吧, 首先我们要给元素实现动画效果 得给元素加上一个变换属性 不然是没效果的噢！给需要运行动画的元素加上下边这个类
.animated.animated{
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode:
-moz-animation-fill-mode:
-o-animation-fill-mode:
animation-fill-mode:
}接着咱们来看看具体动画 是如何完成的, 我的动画是左右渐渐隐藏/显示效果， 我们先给这个动画样式取一个名字 .fadeInLeft, 我们的样式和动画的名称都同名称 方便修改和维护:为了节省地方接下来咱们的动画仅仅 支持weikit内核的浏览器， 你自己实现的时候可以加上其它浏览器的 私有前缀 比如 -moz-，-ms-，-o-
.fadeInLeft {
-webkit-animation-name: fadeInL
-moz-animation-name: fadeInL
-o-animation-name: fadeInL
animation-name: fadeInL
@-moz-keyframes fadeInLeft {
opacity: 0;
-moz-transform: translateX(0);
-moz-transform: translateX(-100%);
opacity: 1;
-moz-transform: translateX(0);
.fadeOutLeft {
-webkit-animation-name: fadeOutL
-moz-animation-name: fadeOutL
-o-animation-name: fadeOutL
animation-name: fadeOutL
@-webkit-keyframes fadeOutLeft {
opacity: 1;
-webkit-transform: translateX(0);
opacity: 0;
-webkit-transform: translateX(-100%);
.fadeInRight {
-webkit-animation-name: fadeInR
-moz-animation-name: fadeInR
-o-animation-name: fadeInR
animation-name: fadeInR
@-webkit-keyframes fadeInRight {
opacity: 0;
-webkit-transform: translateX(0);
-webkit-transform: translateX(100%);
opacity: 1;
-webkit-transform: translateX(0);
.fadeOutRight {
-webkit-animation-name: fadeOutR
-moz-animation-name: fadeOutR
-o-animation-name: fadeOutR
animation-name: fadeOutR
@-webkit-keyframes fadeOutRight {
opacity: 1;
-webkit-transform: translateX(0);
opacity: 0;
-webkit-transform: translateX(100%);
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
@-webkit-keyframes fadeInUp {
opacity: 0;
-webkit-transform: translateY(0);
-webkit-transform: translateY(20px);
opacity: 1;
-webkit-transform: translateY(0);
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
@-webkit-keyframes fadeOutUp {
opacity: 1;
-webkit-transform: translateY(0);
opacity: 0;
-webkit-transform: translateY(-100%);
实现思路非常简单吧, 我们运行动画就是在一个时间段内,元素从X/Y轴的偏移过程，在这个过程中你可以加上其它效果！我在这里仅仅是抛砖引玉。旋转左边进入退出效果
.rotateInUpLeft {
-webkit-animation-name: rotateInUpL
-moz-animation-name: rotateInUpL
-o-animation-name: rotateInUpL
animation-name: rotateInUpL
@-webkit-keyframes rotateInUpLeft {
-webkit-transform-origin:
-webkit-transform: rotate(0);
opacity: 0;
-webkit-transform-origin:
-webkit-transform: rotate(90deg);
-webkit-transform-origin:
-webkit-transform: rotate(0);
opacity: 1;
@-webkit-keyframes rotateOutUpLeft {
-webkit-transform-origin:
-webkit-transform: rotate(0);
opacity: 1;
-webkit-transform-origin:
-webkit-transform: rotate(-90deg);
opacity: 0;
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpL
-moz-animation-name: rotateOutUpL
-o-animation-name: rotateOutUpL
animation-name: rotateOutUpL
变形进入退出
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
-moz-animation-name: lightSpeedIn;
-o-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-
-moz-animation-timing-function: ease-
-o-animation-timing-function: ease-
animation-timing-function: ease-
@-webkit-keyframes lightSpeedIn {
0% { transform: translateX(0%) skewX(0deg); opacity: 0; }
1% { transform: translateX(100%) skewX(-30deg); }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
@-webkit-keyframes lightSpeedOut {
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
.lightSpeedOut {
-webkit-animation-name: lightSpeedO
-moz-animation-name: lightSpeedO
-o-animation-name: lightSpeedO
animation-name: lightSpeedO
-webkit-animation-timing-function: ease-
-moz-animation-timing-function: ease-
-o-animation-timing-function: ease-
animation-timing-function: ease-
摇摆震动提示效果
@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
-webkit-animation-name:
-moz-animation-name:
-o-animation-name:
animation-name:
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
-webkit-animation-name:
-moz-animation-name:
-o-animation-name:
animation-name:
放大摇摆效果
-webkit-animation-name:
-moz-animation-name:
-o-animation-name:
animation-name:
@-webkit-keyframes tada {
0% {-webkit-transform: scale(1);}
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
swing 摇摆效果
-webkit-transform-origin:
-moz-transform-origin:
-o-transform-origin:
transform-origin:
-webkit-animation-name:
-moz-animation-name:
-o-animation-name:
animation-name:
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
好吧 今天的内容到此为止,以后会陆续为大家分享更多更绚丽的动画效果！补充一句 转载务必注明出处！！！
59 queries in 0.520 seconds.