{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Deceive 欺骗 的问题《CSS3 Scale, Fade and Spin on the same element (why》','https://www.manongdao.com/q-607542.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
OK noobs. Need this circle to scale and fade in once at the beginning of the animation (while spinning) and continue to spin thereafter. Not that hard right!?! Got the fade and spin working but scale just refuses to work!
Is there a fat finger somewhere? Before I rip out what hair I have left, please expose my noobness and why SCALE is not working? Thank you, that is all...
Latest FF only. (To lazy to code for everything else.)
<!DOCTYPE html>
<html>
<head>
<style>
div
{width: 100px;
height: 100px;
background: transparent;
border: solid 10px blue;
border-radius: 50%;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
-moz-animation-name: scaleIn,fadeIn,spin;
-moz-animation-duration: 1s,1s,1s;
-moz-animation-timing-function: ease-in,ease-in,linear;
-moz-animation-delay: 0,0,0;
-moz-animation-iteration-count: 1,1,infinite;
-moz-animation-direction: normal,normal,normal;
-moz-animation-fill-mode: forwards,forwards,forwards;
-moz-animation-play-state: running,running,running;}
@-moz-keyframes scaleIn
{
from {-moz-transform: scale(2);}
to {-moz-transform: scale(1);}
}
@-moz-keyframes fadeIn
{
from {opacity: 0.0;}
to {opacity: 1.0;}
}
@-moz-keyframes spin
{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
It's because
-moz-transform:rotate()is overriding-moz-transform:scale(). They need to be togetherjsFiddle
As for how to get it to rotate and scale and then just rotate, you will need to make another
@keyframesjsFiddle
FYI your
-moz-animation-fill-moderule was breaking the 3rd animation for me :s not sure why, remove it seems to work fine.