跨浏览器CSS动画效果实现方式
2023/7/6 10:13:33
我们要处理web动画一般采用jQuery框架，零度在此推荐一个很酷的跨浏览器动画效果实现方式Animate.css，这套CSS样式支持很多不错的动画特效，在本文末尾将提供演示，通过Animate.css样式能够更加便捷的向页面元素添加动画，而不需要其它复杂的操作。
与其它的CSS样式一样，要使用它，首先需要在html头部引用animate.css样式表，官方提供压缩版的animate.min.css，示例如下：
<head> <title>零度编程网</title> <link rel="stylesheet" href="animate.min.css"> </head>
通过jQuery选择要进行动画的元素，为元素添加动画类名即可实现动画效果，不同的动画效果具有不同的类名，您可通过本文末尾的示例选择合适的类名，Animate.css简单易用，只需为元素添加类名，提供60种动画效果供您选择。
<script type="text/javascript"> $('#yourElement').addClass('animated bounceOutLeft'); </script>
您也可以自定义动画的持续时间、延长时间和重复次数，只需编写三条CSS规则即可，vendor表示浏览器前缀（webkit, moz, etc）
#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }