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 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;
}