animate css3 循环

什么是Animate CSS3循环？在CSS编程中，动画是经常用到的一种技术。Animate CSS3是一种动画库，可以让您使用CSS轻松地为网站添加动画效果。而循环是指动画可以一遍接一遍循环运行，直到网页访问者停止它或离开页面。使用Animate CSS3循环，您可以为您的网站提供一些独特的设计元素，无需任何Javascript或其他编码。

/* CSS代码 */
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}

这段CSS代码实现了一个bounce（弹跳）的动画，动画时长为2秒，并且可以无限循环。通过给动画的类名（class）添加.animated，可以使动画清晰度更好，实现更多的效果。同时，定义了动画的关键帧（keyframes）名称为bounce，并设定动画的各个时间点的状态。

接下来，将定义的关键帧（keyframes）.bounce添加到HTML元素class中，如div class="bounce"。这样就完成了简单的Animate CSS3循环动画的实现。

需要注意的是，Animate CSS3使用了新的CSS性质——animation来实现，低版本的浏览器可能无法正常浏览您的设计效果。为了兼容所有浏览器，您可以使用一些现成的Javascript库，如jQuery和Animate.css。同时，如果您想要实现更多自定义的效果，可以去深入学习Animate CSS3的使用，开发更有创意的动画设计。

查看更多关于animate css3 循环的详细内容...