What is Transition
Transition is the easiest way to create animation in CSS. So, I am not going to deep dig into the history of transition. We developers always wanted to see the end result and then we move forward. So, here I am attaching a Codepen below for end result.
Have a look and then move forward.
https://codepen.io/sk3213/pen/XWjdwMY
So, let's start with some basics.
Syntax :
transition:
property
duration
timing-function
delay;
Well, there are thousands of ways to use it, but most of the time it is used in case of hovering. So, let me take an example to explain it in brief.
.First{
background: black;
transition: background 1s ease-in;
// Here I am writing background because I want to change background on hover
}
.First:hover {
background: red;
// Magic
}
Transition timing function values
1. linear
2. ease
3. ease-in
4. ease-out
5. ease-in-out
Which Properties you can Animate using CSS Animations
You can find out here a list of all the properties you can animate via transition
Sources
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Advance
cubic-bezier - https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
Top comments (0)