?? CSS Animations – Overview

CSS animations allow elements to gradually change styles over time. They’re more powerful than simple transition effects and are defined using the @keyframes rule.

? Basic Syntax:

@keyframes animation-name {  from { /* initial styles */ }  to   { /* final styles */ }}

Or with intermediate steps:

@keyframes animation-name {  0%   { /* start */ }  50%  { /* middle */ }  100% { /* end */ }}

? Applying the Animation:

.element {  animation-name: animation-name;  animation-duration: 2s;  animation-timing-function: ease;  animation-delay: 0s;  animation-iteration-count: infinite;  animation-direction: alternate;  animation-fill-mode: forwards;}

You can also use the shorthand:

.element {  animation: animation-name 2s ease 0s infinite alternate forwards;}

? Example:

<style>@keyframes slide-in {  from { transform: translateX(-100%); opacity: 0; }  to   { transform: translateX(0); opacity: 1; }}.box {  width: 100px;  height: 100px;  background: tomato;  animation: slide-in 1s ease-out forwards;}</style><div class="box"></div>

?? Animation Properties Explained:

? Multiple Animations

You can apply multiple animations separated by commas:

.element {  animation: slide-in 1s ease-out, fade-in 2s ease-in;}

? Tips:

• Combine with hover, focus, or JS to trigger animations.

• Use animation-fill-mode: forwards to retain final styles.

• Use tools like cubic-bezier.com for custom timing.

Would you like an example of a bounce, typing effect, or loading spinner?