CSS Transitions

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Transitions

CSS Transitions are a powerful tool that web developers use to create smooth, dynamic animations. They allow for the creation of animations that are more complex and smoother than those created with traditional methods such as JavaScript or Flash.

CSS Transitions are a part of the CSS3 specification and are supported by all modern web browsers. They are used to animate the change of one or more CSS properties over a specified duration. This is done by specifying a start and end state for the property and then allowing the browser to interpolate the values between the two states.

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

you can control the individual components of the transition with the following sub-properties:

• Transition: A shorthand property for setting the four transition properties into a single property.

div {
  /* transition: <property> <duration> <timing-function> <delay>; */
  background-color: #333;
  transition: all 1s ease-out;
}

• transition-property: Specifies the name of the CSS property the transition effect is for.

div {
   transition-property: opacity, left; 
}

• transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.

div { 
   /* <time> values*/
   transition-duration: 4s;
   /* <time: Right,Left,Top, bottom> */
   transition-duration: 3s, 5s, 2s, 1s;
}

• transition-delay: Specifies a delay (in seconds) for the transition effect.

div {
   transition-delay: 0.25s; 
}

• transition-timing-function: Specifies the speed curve of the transition effect.

div {
   transition-timing-function: linear;
}