CSS Transitions

1.What is a CSS Transition?
CSS Transitions let you smoothly change property values over a specified duration instead of having them change instantly. They’re commonly used for hover effects, animations on state changes, and improving user experience.
A transition defines how a CSS property changes from one value to another over time.
Example:
button {
background-color: blue;
transition: background-color 0.5s ease;
}
button:hover {
background-color: red;
}
When you hover, the color gradually changes from blue to red in 0.5 seconds instead of switching instantly.

2.Key Properties of CSS Transition

• transition-property
  Specifies which CSS property the transition applies to.
  transition-property: background-color;
  You can specify one or multiple properties:
  transition-property: background-color, transform;
  Use all to apply to all animatable properties:
  transition-property: all

• transition-duration
  Defines how long the transition takes.
  transition-duration: 0.5s;
  Values:
  s → seconds (e.g., 1s)
  ms → milliseconds (e.g., 500ms)
  Without duration, no transition will happen (default is 0s).

• transition-timing-function
  Controls the speed curve of the transition (how it accelerates/decelerates).
  transition-timing-function: ease;
  Common values:
  ease → slow start, fast middle, slow end (default)
  linear → constant speed
  ease-in → slow start
  ease-out → slow end
  ease-in-out → slow start & end
  Custom curve:
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

• transition-delay
  Specifies when the transition should start.
  transition-delay: 0.2s;
  The animation will wait 0.2 seconds before starting.

3.What is transition-timing-function?
The transition-timing-function in CSS defines how the speed of a transition changes over time.
In simple terms:
It controls the motion style of the animation — whether it starts slow, speeds up, or slows down at the end.

4.Why it matters
Even if two transitions have the same duration (e.g., 1 second), they can feel very different depending on the timing function.

Common Timing Functions Explained

1. ease (default)
   transition-timing-function: ease;
   Behavior:Starts slow
   Speeds up in the middle
   Ends slow

2. linear
   Meaning: Constant speed from start to finish.
   No acceleration or deceleration

3. ease-in
   Meaning: Starts slow, then speeds up.
   No slowing down at the end.
   Speed behavior:Slow → Fast

4. ease-out
   Meaning: Starts fast, then slows down at the end.
   Speed behavior:Fast → Slow

5. ease-in-out
   Meaning: Starts slow → speeds up → slows down again.
   Speed behavior:Slow → Fast → Slow (more balanced than ease)

These are CSS animation properties used to control how an animation behaves. Let’s break each one down clearly with examples and real understanding

1. animation-name
   What it does:Specifies which animation (keyframes) to apply.
   How it works:You define an animation using @keyframes, and this property links to it.
   Example:
@keyframes slide {
   from { transform: translateX(0); }
   to { transform: translateX(200px); }
   }
   div {
   animation-name: slide;
   }``

   1. animation-duration What it does:Defines how long the animation takes to complete one cycle. Values: s → seconds (e.g., 2s) ms → milliseconds (e.g., 500ms) `Example: div { animation-duration: 2s; } Meaning:The animation will finish in 2 seconds.

`

1. animation-timing-function
   What it does:Controls the speed curve (how animation accelerates/decelerates).
   Common values:
   linear
   ease (default)
   ease-in
   ease-out
   ease-in-out
   Example:
   div {
   animation-timing-function: ease-in-out;
   }
   Meaning:Animation starts slow → speeds up → slows down.

2. animation-delay
   What it does:Specifies how long to wait before starting the animation.
   Specifies how long to wait before starting the animation.
   Example:
   div {
   animation-delay: 1s;
   }
   Meaning:Animation starts after 1 second delay.

3. animation-iteration-count
   What it does:Defines how many times the animation repeats.
   Values:
   Number → 1, 2, 3, etc.
   infinite → loops forever
   Example:
   div {
   animation-iteration-count: infinite;
   }
   Meaning:Animation runs forever 🔄

4. animation-direction
   What it does:Controls direction of animation playback.
   Values:
   Value Meaning
   normal Forward (default)
   reverse Backward
   alternate Forward → Backward
   alternate-reverse Backward → Forward
   `Example:
   div {
   animation-direction: alternate;
   }

Meaning:First forward → then backward → repeat
Full Example (All Together)
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}

div {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
`
Shortcut Property (Shorthand)
You can write everything in one line:
div {
animation: move 2s ease-in-out 1s infinite alternate;
}