这个要分成两个css3动画去做小变大是最外层父级，例如它执行了1s；内层的负责旋转，延迟1s执行主要需要使用-webkit-animation如：-webkit-animation:gogogo2sinfinitelinear;其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环linear是线性变化(step-end则是无线性变化，直接输出结果)代码...
css3 由小变大然后一直旋转的动画怎么做
这个要分成两个css3动画去做
小变大是最外层父级，例如它执行了1s；
内层的负责旋转，延迟1s执行2017-07-03
<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-moz-keyframes myfirst /* Firefox */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-o-keyframes myfirst /* Opera */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}</style></head><body><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div></body></html>2014-08-26
这个只用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的动画时间，你可以根据情况作出适当的时间调整。
2017-07-03
主要需要使用-webkit-animation如：-webkit-animation:gogogo2sinfinitelinear;其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环linear是线性变化(step-end则是无线性变化，直接输出结果)代码如下：CSS:@-webkit-keyframesgogogo{0%{-webkit-transform:rotate(0deg);border:5pxsolidred;}50%{-webkit-transform:rotate(180deg);background:black;border:5pxsolidyellow;}100%{-webkit-transform:rotate(360deg);background:white;border:5pxsolidred;}}.loading{border:5pxsolidblack;border-radius:40px;width:28px;height:188px;-webkit-animation:gogogo2sinfinitelinear;margin:100px;}2017-07-03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.circle {
width: 200px;
height: 200px;
text-align: center;
background-color: #fc3;
border-radius: 50%;
animation: sizeAnimate 1s ease-in, rotateAnimate 1s infinite linear 1s;
}
.animate-show {
width: 20px;
height: 20px;
background-color: #000;
display: inline-block;
}
@keyframes sizeAnimate {
from {
width: 20px;
height: 20px;
}
to {
width: 200px;
height: 200px;
}
}
@keyframes rotateAnimate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle"><span class="animate-show"><span></div>
</body>
</html>
随便写了一个2017-07-03
亲，css写不了哦。用js去写2017-07-03
