QuitExams

What are CSS Animations?

CSS Animations allow elements to smoothly change from one style to another using @keyframes. You can control how long the animation runs, how many times it repeats, and its timing.

1️⃣ Basic Animation using @keyframes

The @keyframes rule defines how an element changes through different steps of an animation.

<style>
@keyframes colorChange {
  0%   { background-color: #007bff; }
  50%  { background-color: #28a745; }
  100% { background-color: #007bff; }
}
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation-name: colorChange;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
</style>

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

2️⃣ animation-name & animation-duration

- animation-name: Name of the keyframes.
- animation-duration: How long one cycle runs.

<style>
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(150px); }
}
.box2 {
  width: 100px;
  height: 100px;
  background: #ff9800;
  animation-name: slide;
  animation-duration: 2s;
}
</style>

<div class="box2"></div>

3️⃣ animation-delay

Delays the start of the animation by a set time.

<style>
@keyframes delayAnim {
  0% { background: #dc3545; }
  100% { background: #28a745; }
}
.box3 {
  width: 100px;
  height: 100px;
  background: #dc3545;
  animation: delayAnim 3s ease 2s infinite;
}
</style>

<div class="box3"></div>

4️⃣ animation-iteration-count

Defines how many times an animation repeats. Use infinite for endless looping.

<style>
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
}
.box4 {
  width: 100px;
  height: 100px;
  background: #6f42c1;
  animation: bounce 1s infinite;
}
</style>

<div class="box4"></div>

5️⃣ animation-direction

Controls whether the animation runs forward, backward, or alternates. Values: normal, reverse, alternate, alternate-reverse.

<style>
@keyframes moveAlt {
  from { transform: translateX(0); }
  to { transform: translateX(150px); }
}
.box5 {
  width: 100px;
  height: 100px;
  background: #17a2b8;
  animation: moveAlt 2s alternate infinite;
}
</style>

<div class="box5"></div>

6️⃣ animation-timing-function

Defines how animation speed changes. Common values: linear, ease, ease-in, ease-out, ease-in-out.

<style>
@keyframes timingAnim {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}
.box6 {
  width: 100px;
  height: 100px;
  background: #ffc107;
  animation: timingAnim 3s ease-in-out infinite;
}
</style>

<div class="box6"></div>

7️⃣ animation-fill-mode

Determines how styles are applied before and after the animation. Values: none, forwards, backwards, both.

<style>
@keyframes fillAnim {
  from { background: #f8d7da; }
  to { background: #28a745; }
}
.box7 {
  width: 100px;
  height: 100px;
  background: #f8d7da;
  animation: fillAnim 3s forwards;
}
</style>

<div class="box7"></div>

8️⃣ animation-play-state

Controls whether animation is running or paused.

<style>
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.box8 {
  width: 100px;
  height: 100px;
  background: #6610f2;
  animation: rotate 4s linear infinite;
}
.box8:hover {
  animation-play-state: paused;
}
</style>

<div class="box8">Hover</div>

📘 Summary of Animation Properties