CSS Transition aur Animation

CSS Transition kya hai?

Transition property CSS me ek smooth effect create karti hai jab kisi property ke value change ho. Jaise button ke hover effect me color dheere-dheere change hona instead of ek dum se.

Example:

.transition-box {
  transition: background-color 1.5s ease, transform 1s ease;
}
.transition-box:hover {
  background-color: #546285;
  transform: scale(1.1);
}

Transition ke important properties

• transition-property: Kaunsi property animate hogi.
• transition-duration: Duration (kitni der tak transition chalega).
• transition-timing-function: Speed curve (ease, linear, etc.).
• transition-delay: Transition start hone me kitna time lagega.

CSS Animation kya hai?

Animation me aap complex aur multi-stage visual effects create kar sakte hain. Ye keyframes ke zariye define hota hai ki animation ki starting, middle aur end states kya hongi.

Example:

@keyframes bounce {
  0% {
    transform: translateY(0);
    background-color: #db1d29;
  }
  50% {
    transform: translateY(-30px);
    background-color: #546285;
  }
  100% {
    transform: translateY(0);
    background-color: #db1d29;
  }
}
.animation-box {
  animation: bounce 2s infinite alternate ease-in-out;
}

Animation ke important properties

• animation-name: Keyframe animation ka naam.
• animation-duration: Animation kitni der chalega.
• animation-iteration-count: Kitni baar repeat hoga.
• animation-timing-function: Speed curve.
• animation-delay: Delay before animation starts.
• animation-direction: Normal, reverse, alternate etc.

CSS Transitions aur Animations se apne web elements ko interactive aur visually appealing banayein.