Transition transition effect in CSS
Transition properties in CSS are widely used in web design to create beautiful transition effects on websites easily.
Transition 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:
- transition-delay: the time interval for each transition effect.
- transition-duration: the duration of the transition.
- transition-property: attribute to convert.
- 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 :
- CSS properties want to add effects
- 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
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 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 3
Conversion speed
The transition-timing-function attribute is used to determine the rate of change when converting.
The values available are as follows:
- ease : create transition effect at the beginning, then slowly and quickly and slowly end slowly (default value).
- linear: create transition effect from start to finish at the same speed.
- ease-in: create a slow transition effect at the start.
- ease-out: create a slow transition effect at the end.
- 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 4
Transition transition effect in CSS Picture 5
Transition transition effect in CSS Picture 6
Transition transition effect in CSS Picture 7
Transition transition effect in CSS Picture 8
Run the following code yourself to see the difference:
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 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 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 11
Previous lesson: 3D Transform in CSS
Next lesson: Animation animation effect in CSS
You should read it
- Set Slide transition effects in PowerPoint
- Apply transition effects in PowerPoint 2016
- Introduction to UAG DirectAccess - Part 2: IPv6 transition technology and NRPT
- MS PowerPoint 2007 - Lesson 10: Slide presentation effects
- How does the transition from old Edge to Edge Chromium on Windows 10 happen? Do you need any intervention?
- Instructions for creating effects in PowerPoint
- HD DVD compared with Blu-ray
- 3.3 million PCs in South Korea are about to abandon Windows, move to Linux
- The Mac software hunt
- Top 10 tips for using ProShow Producer
- 5 Ways Technology is Transforming the Auto Industry Right Now
- What are transitions and animations in Svelte?