CSS Center Revolve animation effect
CSS Center Revolve animation
Rotate an HTML element around its center, using pure CSS property transform#rotate. In this effect the rotation rotates clockwise first, then changes direction to anti-clockwise.
<style>
.center-revolve {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: center-revolve;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.5,1,1,1);
}
@keyframes center-revolve {
/* 0% { transform: } */
50% { transform: rotate(360deg); }
/*100% { transform: ; }*/
}</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence