Kevin Powell - Community•2y ago

animation: rotate linear + scale alternate-reverse

https://codepen.io/JunSu-Ho/pen/dyqwQGd how do I combine those animations?, I need scaling to be alternate-reverse, but I want rotate to be linear, rotating same direction not reversing

Jun Su-Ho

CodePen

dyqwQGd

...

3 Replies

glutonium•2y ago

<!DOCTYPE html>
<html>
<head>
   <style>

body{
display : grid;
place-items : center;
min-height : 100vh;
}

div{
height : 200px;
width : 200px;
background: black;
animation: animate 2s linear infinite;
}

@keyframes animate {

50%{transform : scale(0.5)rotate(180deg)}

100%{transform : scale(1)rotate(360deg)}
}
   </style>
</head>
<body>
   <div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <style>

body{
display : grid;
place-items : center;
min-height : 100vh;
}

div{
height : 200px;
width : 200px;
background: black;
animation: animate 2s linear infinite;
}

@keyframes animate {

50%{transform : scale(0.5)rotate(180deg)}

100%{transform : scale(1)rotate(360deg)}
}
   </style>
</head>
<body>
   <div></div>
</body>
</html>

glutonium•2y ago

JunSu-HoOP•2y ago

thanks

Gaming

Programming

animation: rotate linear + scale alternate-reverse