animate css3 动画（css3 由小变大然后一直旋转的动画怎么做）
本文目录
css3 由小变大然后一直旋转的动画怎么做
这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：
《!DOCTYPE html》 《html》 《head》 《title》HTML5《/title》 《meta charset=“utf-8“》 《meta name=“viewport“ content=“width=device-width, initial-scale=1.0, maximum-scale=1.0“ /》 《style type=“text/css“》 img{width: 200px;} .div1{width: 200px;height: 200px;border:1px solid #000;margin: 150px auto;} .animate1{ -webkit-animation: move1 2s infinite; } .animate2{ -webkit-animation: move2 1s infinite; } @-webkit-keyframes move1{ 0%{ -webkit-transform:scale(1); } 100%{ -webkit-transform:scale(1.5); } } @-webkit-keyframes move2{ 0%{ -webkit-transform: rotateZ(0deg) scale(1.5); -webkit-transform:; } 100%{ -webkit-transform: rotateZ(360deg) scale(1.5); } } 《/style》《/head》 《body》 《div class=“div1 animate2“》《/div》 《script type=“text/javascript“》 window.onload=function(){ var oDiv=document.querySelector(“.div1“); oDiv.className=“div1 animate1“; setTimeout(function(){ oDiv.className=“div1 animate2“; },2000); } 《/script》 《/body》 《/html》原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。
当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。
如何使用animate.css
animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，可以先在本页看下演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：首先在head中引入下载的animate.css文件然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。假设使用jquery，要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake这样载入页面，元素就能动起来了。你也可以在动画完成后，把动画类移除，以便可以再次进行同一个动画。至于动画的配置参数，比如动画持续时间，动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就行了。注意这些属性还要记得加上各浏览器的前缀。总之是很灵活的，说到底不就是一个css文件吗，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的类名，就在里面改掉就行了。如果你只想用里面的部分动画，也可以把那些要使用的动画分离出来，它的官网也提供了这样的功能。
animate.css和自己写的css3动画有区别吗
animate.css是别人写好的动画，和自己写没什么区别，自己也可以写。例如我想加一个向右移动200px，然后回到原点，然后一直循环的动画。可是animate.css里面没有，我就可以自己加一个@keyframes进去:
@keyframes LeftToRight{ 0% { left: 0; } 50% { left: 200px; } 100% { left: 0; }}最后调用的时候：
《div class=“zsz“》zsz《/div》.zsz { position: relative; left: 0; width: 50%; animation: 6s LeftToRight linear infinite;}CSS3 animation动画，循环间的延时执行该怎么弄
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow“、“fast“ 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
更多文章：
preventive是什么意思（preventive medicine是什么意思）
2024年7月5日 03:55
2023年5月14日 18:20
2024年5月6日 16:29
2024年5月17日 07:23
2024年5月5日 09:13
2024年8月16日 00:30
2024年5月4日 00:53
2023年7月13日 07:20
如何制造简单的木马？上海爸爸自制可亮灯可乘坐旋转木马，这个自制木马有多精致
2023年7月30日 15:00
2024年3月27日 13:15
特殊网站记事本（WINDOWS里面一些特殊字符如“心”“音符”等显示为方块，在网页记事本QQ里面都是如此，有没有办法修复）
2024年6月8日 01:11
2024年7月17日 08:35
2024年6月9日 14:03
2024年8月24日 20:22
2024年7月21日 09:10
2024年6月26日 04:33
2024年7月23日 17:28
2024年7月3日 11:28
2024年3月12日 01:50
2024年7月2日 00:36
