Example

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

👉 You can also use:

from { }   /* same as 0% */
to { }     /* same as 100% */

Multiple Steps (Important)

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

👉 This creates real animation feeling

3. Animation Properties

1. animation-name

animation-name: fadeIn;

2. animation-duration

animation-duration: 1s;

3. animation-timing-function

Same as transitions:

ease
linear
ease-in
ease-out
cubic-bezier()

4. animation-delay

animation-delay: 0.5s;

5. animation-iteration-count

👉 How many times it runs

animation-iteration-count: 3;
animation-iteration-count: infinite;

6. animation-direction

👉 Controls direction

normal
reverse
alternate
alternate-reverse

7. animation-fill-mode (VERY IMPORTANT)

👉 Controls final state

animation-fill-mode: forwards;

Values:

• none → resets
• forwards → stays at end
• backwards → applies start before delay
• both → both

8. animation-play-state

animation-play-state: paused;

👉 Used with hover:

.box:hover {
  animation-play-state: paused;
}

9. Shorthand

animation: fadeIn 1s ease 0s 1 normal forwards;

👉 Order:

name | duration | timing | delay | iteration | direction | fill-mode

 1. Stagger Animation

.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }