<style>
* {
box-sizing: border-box;
}
html, body {
align-items: center;
background: linear-gradient(45deg, rebeccapurple, dodgerblue);
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
padding: 0;
width: 100vw;
}
div {
background-color: #2eec71;
height: 100px;
width: 100px;
}
</style>
<div></div>
div {
animation-name: spin;
animation-duration: 2s;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.