Hackforge Academy

Explanation

CSS animations create more advanced effects by defining keyframes that describe how an element changes over time.

Code:

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

Explanation

The animation property applies a keyframe animation to an element.

Code:

.box {
  animation: fade 2s;
}

Explanation

Animations can repeat continuously using the infinite keyword.

Code:

.loader {
  animation: spin 1s linear infinite;
}

Explanation

Multiple keyframes can define complex animations by specifying different stages.

Code:

@keyframes move {
  0% { left: 0; }
  50% { left: 100px; }
  100% { left: 0; }
}

Explanation

Animation properties include duration, delay, iteration-count, direction, and timing function.

Code:

.circle {
  animation: bounce 2s ease-in-out infinite;
}