Core Code
Core Code Modern Dev Handbook

Basic CSS Animation

Create a simple animation using @keyframes.

Preview

Code

<style>
.box{
width:80px;
height:80px;
background:#60a5fa;
animation:move 2s infinite;
}

@keyframes move{
0%{transform:translateX(0);}
50%{transform:translateX(80px);}
100%{transform:translateX(0);}
}
</style>

<div class="box"></div>

More CSS Animations Examples (8)

example Animation Duration open example example Animation Delay open example example Animation Iteration open example example Animation Direction open example example Animation Fill Mode open example example Spinner Animation open example example Pulse Animation open example example Hover Animation open example