scaleRotate
scaleRotate
<style>
@keyframes scaleRotate{
0%,100%{transform:rotate(0deg) scale(1,1);}
50%{transform:rotate(360deg) scale(.5,.5);}
}
#box {
width:80px;height:80px;
margin:60px auto;
border-radius:25%;
padding:10px;
background:red;
animation:scaleRotate 2s linear infinite;
}
#circle{
border-radius:50%;
background-color:black;
height:100%
}
</style>
<div id="box">
<div id="circle"></div>
</div>
scaleRotate
<style>
@keyframes scaleRotate{
0%,100%{transform:rotate(0deg) scale(1,1);}
50%{transform:rotate(360deg) scale(.5,.5);}
}
#box {
width:80px;height:80px;
margin:60px auto;
border-radius:25%;
padding:10px;
background:red;
animation:scaleRotate 2s linear infinite;
}
#circle{
border-radius:10% 50%;
background-color:black;
height:100%
}
</style>
<div id="box">
<div id="circle"></div>
</div>