一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50%{
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100%{
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear ;
margin:100px;
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
在w3school上面查到一下，CSS3中的动画由animation和@keyframes 结合实现出来的。以往项目已来，一直做的是单个动画，现在讲解一下两个动画效果如何组合在一起首先了解一下animation的所有属性 W3school是这样定义的：
然后我们用@keyframes 规则来创建两个我们要执行的动画
接下来我们把写好的两个效果捆绑在“div”元素上 ， 如下：
这样效果就完成了。
PS这里并没有写兼容，说一下浏览器兼容。
HTML代码
CSS代码（创建一个与html同目录的indexcss文件）
#ballWrapper{position:fixed;top:35%;left:50%;z-index:100;margin-left:-70px;width:140px;height:300px;cursor:pointer;-webkit-transition:all 5s linear 0s;-moz-transition:all 5s linear 0s;transition:all 5s linear 0s;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);-ms-transform:scale(1)}#ballWrapper:active{cursor:pointer;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);-ms-transform:scale(0)}
#ball{position:absolute;top:0;z-index:11;width:140px;height:140px;border-radius:70px;background:#bbb;background:url(data:image/svg+xml; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1))); background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,04), inset -2px -1px 40px rgba(0,0,0,04), 0 0 1px #000; cursor: pointer; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(187,187,187,1) 0,rgba(119,119,119,1) 99%);filter:progid:DXImageTransformMicrosoftgradient( startColorstr='#bbbbbb', endColorstr='#777777', GradientType=0 );-webkit-animation:jump 1s infinite;-moz-animation:jump 1s infinite;-o-animation:jump 1s infinite;-ms-animation:jump 1s infinite;animation:jump 1s infinite}
#ball::after{position:absolute;top:10px;left:30px;z-index:10;width:80px;height:40px;border-radius:40px/20px;background:url(data:image/svg+xml; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); content: ""; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(232,232,232,1) 0,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransformMicrosoftgradient( startColorstr='#e8e8e8', endColorstr='#00ffffff', GradientType=0 )}
#ballShadow{position:absolute;bottom:0;left:50%;z-index:10;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-webkit-transform:scaleY(3);-moz-transform:scaleY(3);-o-transform:scaleY(3);transform:scaleY(3);-ms-transform:scaleY(3);-webkit-animation:shrink 1s infinite;-moz-animation:shrink 1s infinite;-o-animation:shrink 1s infinite;-ms-animation:shrink 1s infinite;animation:shrink 1s infinite}
@-webkit-keyframes jump{0%{top:0;-webkit-animation-timing-function:ease-in}
50%{top:140px;height:140px;-webkit-animation-timing-function:ease-out}
55%{top:160px;height:120px;border-radius:70px/60px;-webkit-animation-timing-function:ease-in}
65%{top:120px;height:140px;border-radius:70px;-webkit-animation-timing-function:ease-out}
95%{top:0;-webkit-animation-timing-function:ease-in}
100%{top:0;-webkit-animation-timing-function:ease-in}
}
@-moz-keyframes jump{0%{top:0;-moz-animation-timing-function:ease-in}
50%{top:140px;height:140px;-moz-animation-timing-function:ease-out}
55%{top:160px;height:120px;border-radius:70px/60px;-moz-animation-timing-function:ease-in}
65%{top:120px;height:140px;border-radius:70px;-moz-animation-timing-function:ease-out}
95%{top:0;-moz-animation-timing-function:ease-in}
100%{top:0;-moz-animation-timing-function:ease-in}
}
@-o-keyframes jump{0%{top:0;-o-animation-timing-function:ease-in}
50%{top:140px;height:140px;-o-animation-timing-function:ease-out}
55%{top:160px;height:120px;border-radius:70px/60px;-o-animation-timing-function:ease-in}
65%{top:120px;height:140px;border-radius:70px;-o-animation-timing-function:ease-out}
95%{top:0;-o-animation-timing-function:ease-in}
100%{top:0;-o-animation-timing-function:ease-in}
}
@-ms-keyframes jump{0%{top:0;-ms-animation-timing-function:ease-in}
50%{top:140px;height:140px;-ms-animation-timing-function:ease-out}
55%{top:160px;height:120px;border-radius:70px/60px;-ms-animation-timing-function:ease-in}
65%{top:120px;height:140px;border-radius:70px;-ms-animation-timing-function:ease-out}
95%{top:0;-ms-animation-timing-function:ease-in}
100%{top:0;-ms-animation-timing-function:ease-in}
}
@keyframes jump{0%{top:0;animation-timing-function:ease-in}
50%{top:140px;height:140px;animation-timing-function:ease-out}
55%{top:160px;height:120px;border-radius:70px/60px;animation-timing-function:ease-in}
65%{top:120px;height:140px;border-radius:70px;animation-timing-function:ease-out}
95%{top:0;animation-timing-function:ease-in}
100%{top:0;animation-timing-function:ease-in}
}
@-webkit-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-webkit-animation-timing-function:ease-in}
50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,3);box-shadow:0 0 20px 35px rgba(20,20,20,3);-webkit-animation-timing-function:ease-out}
100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-webkit-animation-timing-function:ease-in}
}
@-moz-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-moz-animation-timing-function:ease-in}
50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,3);box-shadow:0 0 20px 35px rgba(20,20,20,3);-moz-animation-timing-function:ease-out}
100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-moz-animation-timing-function:ease-in}
}
@-o-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-o-animation-timing-function:ease-in}
50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,3);box-shadow:0 0 20px 35px rgba(20,20,20,3);-o-animation-timing-function:ease-out}
100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-o-animation-timing-function:ease-in}
}
@-ms-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-ms-animation-timing-function:ease-in}
50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,3);box-shadow:0 0 20px 35px rgba(20,20,20,3);-ms-animation-timing-function:ease-out}
100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);-ms-animation-timing-function:ease-in}
}
@keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);animation-timing-function:ease-in}
50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,3);box-shadow:0 0 20px 35px rgba(20,20,20,3);animation-timing-function:ease-out}
100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,1);box-shadow:0 0 20px 35px rgba(20,20,20,1);animation-timing-function:ease-in}
}
CSS3的动画的优点：
1在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
2代码相对简单
但其缺点也很明显：
1在动画控制上不够灵活
2兼容性不好
3部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。
所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。
过渡使用 trainsition 属性，让元素的样式变化，不再瞬间完成，而是可以设定时间，在时间段内逐渐完成。
对单独的div元素做分别做设置进行属性说明：
1、设置在3秒内完成颜色的变化
2、可以分别对不同的属性分开做时间长度的设定，记得用逗号隔开
3、延迟delay：想在某个属性开始执行样式变化后的多少秒，才让另一个属性开始进行样式的动态变化，就可以使用延迟。用法就是：
2s 1s width ,意思就是在高度开始发生变化后的1s后，width的宽度才开始展现变化，然后在2s内完成宽度从30px到60px的变化。
delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果
3、变化的速度：默认不设定，就是逐渐放慢的，默认值是ease
还可以额外指定设置：
linear:匀速
ease-in：加速
ease-out：减速
上述的三个情况，可以综合写为：
对应的变化就是，div的宽度瞬间变化为60px,然后高度在宽度变化后的1s之后才开始发生变化，在3秒内逐渐加速完成。
重点：
兼容性：各大浏览器基本已经支持无前缀的transition，所以可以直接使用不加前缀；
transition的变化设置，是只对有明确数值设置变化的，对于none,block这类的文字描述无效；
有效性：transition是一次性的，无法重复，除非反复触发。
1、相比于过渡属性transition的设置，动画animation的实现支持更为复杂的动态样式效果。
对单独的div元素做分别做设置进行属性说明：
1、使用animation动画属性，最重要的就是配合有“关键帧”——@keyframes
样式设置如下：
这样的设置，就是将1s分为3帧，每帧显示不同的背景颜色，然后动画效果只显示1次。
注意动画执行完成之后，就恢复元素原来定义的样式设置,如果原来没有这个样式的定义，那也是动画执行完成后恢复没有的状态。
@keyframes的写法比较松泛：
0%等同于from,100%等同于to：
如上面的写法就等同于：
下面的关键帧的写法也是有效的：
当然，（1）也是有延迟效果的设置：设置延迟多少秒后执行动画
（2）每帧之间是平滑过渡的，当然也可以设置为分步过渡，这样就有卡顿的效果：
解释：该动画，在停留1秒后开始执行，执行3次，每次执行时间为2秒，在2秒时间执行完成rainbow定义的关键帧样式，然后分步执行，有卡顿效果。
2、动画持续：动画效果默认只播放一次，加入infinite关键字，可以让动画无限次播放
3、指定动画播放的次数，直接写数值：
4、如果想要让动画结束后，停留在结束状态的样式，而不是默认变为起始状态，就可以添加关键字：
animation-fill-mode属性：
none：默认值，回到动画没开始时的状态
forwards：让动画停留在结束状态
backwards：让动画回到第一帧的状态
4、如果想要将帧数的设置，反向执行，就可以使用animation-direction属性：
normal：动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放
reverse：动画执行，先从结束帧的样式执行跳回到起始帧的样式。例如：
所有的transform属性设置，都不会改变元素占据的位置，还是保留的
1、旋转rotate
通过rotate设置旋转角度，来旋转元素
以div元素为例:
···
<body>
<div class="transform"></div>
</body>
···
2、位移translate
设置X轴、Y轴方向的位移值
设置X轴方向的位移值
设置Y轴方向的位移值
3、缩放scale
设置元素水平方向和垂直方向同时缩放
设置元素水平方向缩放
设置元素垂直方向缩放
只设置一个参数，设置元素水平方向和垂直方向，同一比例同时缩放
4、扭曲：skew，设置元素的平面XY轴的扭曲角度
设置元素X轴，Y轴的扭转角度
只设置一个参数，元素X轴，Y轴的扭转角度相同
设置元素X轴的扭转角度
设置元素Y轴的扭转角度
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）