Transition transition effect in CSS

Transition properties in CSS are widely used in web design to create beautiful transition effects on websites easily.

Transition properties in CSS are widely used in web design to create beautiful transition effects on websites easily.

Transition transition effect in CSS Picture 1Transition transition effect in CSS Picture 1

Transition works by changing the attribute value smoothly from one value to another in a certain time period. Commonly used parameters:

  1. transition-delay: the time interval for each transition effect.
  2. transition-duration: the duration of the transition.
  3. transition-property: attribute to convert.
  4. transition-timing-function: conversion speed occurs.

How to use Transition in CSS

To create a Transition transition effect, you must specify at least two things :

  1. CSS properties want to add effects
  2. Duration of conversion (duration).

Note: If the duration is not specified, the conversion will not be smooth and smooth because the default value is 0.

Change the value of an attribute

Example: Element

purple 100px * 100px, we specify the Transition effect for width attributes, with a duration of 2 seconds:
 div { 
width: 100px;
height: 100px;
background: purple;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}

The transition effect will take place when the width attribute is changed in value.

 div:hover { 
width: 300px;
}

Transition transition effect in CSS Picture 2Transition transition effect in CSS Picture 2

Full code:








Transition properties



Hover over the element to see the transition effect:





Note : When the cursor moves away from the element, it will gradually change back to the original type.

Change the value of multiple attributes

Example: Add transition effects for both width and height attributes, with a duration of 2 seconds for width and 4 seconds for height.

 div { 
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}

Transition transition effect in CSS Picture 3Transition transition effect in CSS Picture 3

Conversion speed

The transition-timing-function attribute is used to determine the rate of change when converting.

The values ​​available are as follows:

  1. ease : create transition effect at the beginning, then slowly and quickly and slowly end slowly (default value).
  2. linear: create transition effect from start to finish at the same speed.
  3. ease-in: create a slow transition effect at the start.
  4. ease-out: create a slow transition effect at the end.
  5. ease-in-out: create a slow transition effect at the beginning and end.
 #div1 {transition-timing-function: linear;} 
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Transition transition effect in CSS Picture 4Transition transition effect in CSS Picture 4
Transition transition effect in CSS Picture 5Transition transition effect in CSS Picture 5
Transition transition effect in CSS Picture 6Transition transition effect in CSS Picture 6
Transition transition effect in CSS Picture 7Transition transition effect in CSS Picture 7
Transition transition effect in CSS Picture 8Transition transition effect in CSS Picture 8

Run the following code yourself to see the difference:








linear
 

ease
 

ease-in
 

ease-out
 

ease-in-out
 



Delay of Transition effect

The transition-delay attribute is used to determine the delay between the time a property changes and when the transition actually starts.

Example : Delay of 1 second before starting conversion.

 div { 
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}

Transition transition effect in CSS Picture 9Transition transition effect in CSS Picture 9

When dragging the mouse, the effect does not happen immediately but will be delayed 1s is the time that we set for it.

Full code:








The transition-delay attribute



Hover over the element to see the transition effect:






Combine Transition with Transform

Transform Quantrimang learned in the previous lesson, go to the 2D Transform review here and 3D Transform here.

Combining Transition with Transform together will create extremely beautiful transition effect.

 div { 
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}

Transition transition effect in CSS Picture 10Transition transition effect in CSS Picture 10








Transition + Transform






The same effects at the beginning of the lesson also use a combination of Transition and Transform. You add some properties to change the color, style, font size . to your liking. The code below for your reference.

Transition transition effect in CSS Picture 11Transition transition effect in CSS Picture 11








TipsMake.com



Previous lesson: 3D Transform in CSS

Next lesson: Animation animation effect in CSS

4 ★ | 2 Vote