learn2kode.in

Menu

CSS Tutorial

Menu

CSS Animations & Transitions

CSS animations and transitions allow you to create smooth visual effects without using JavaScript. They improve user experience by making elements fade, slide, move, or change style gradually.

CSS Transitions

Transitions let you animate the change of CSS properties smoothly over a specific duration.

Basic Syntax

FontAwesome is the most popular icon library. You can include it by adding a CDN link in your HTML <head> section.

Copy Text 
transition: property duration timing-function delay;

Example: Button Hover Effect

Copy Text 
button {
  background-color: #3498db;
  padding: 12px 20px;
  color: #fff;
  border: none;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #1d6fa5;
}

Common Transition Properties

Property Description
transition-property Which CSS property to animate
transition-duration How long the animation takes (seconds or ms)
transition-timing-function Speed curve (ease, linear, ease-in, etc.)
transition-delay Start delay before animation begins

CSS Animations

CSS animations give you more control than transitions. They allow you to define multiple animation steps using @keyframes.

Basic Syntax

Copy Text 
@keyframes animationName {
  from { property: value; }
  to   { property: value; }
}

.element {
  animation: animationName duration timing-function delay iteration-count direction;
}

Example: Simple Fade-In Animation

Copy Text 
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  opacity: 0;
  animation: fadeIn 2s ease-in forwards;
}

Example: Move Element from Left to Right

Copy Text 
@keyframes slideRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

.move-box {
  width: 100px;
  height: 100px;
  background: coral;
  animation: slideRight 1s ease-out forwards;
}

Animation Properties

Property Description
animation-name Name of the keyframes animation
animation-duration Total time animation takes
animation-timing-function Speed curve (ease, linear, ease-in-out…)
animation-delay Delay before animation starts
animation-iteration-count How many times animation repeats (1, infinite)
animation-direction Direction of animation (normal, reverse, alternate)
animation-fill-mode Keeps style before/after animation (forwards, backwards)
animation-play-state Pause/resume animation

Example: Infinite Spinning Animation

Copy Text 
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  width: 60px;
  height: 60px;
  border: 5px solid lightgray;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
CSS Variables