DEV Community

skwebdeveloper
skwebdeveloper

Posted on

Transition CSS

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
Enter fullscreen mode Exit fullscreen mode

So, let's start with some basics.

Syntax :

transition:
property
duration
timing-function
delay;
Enter fullscreen mode Exit fullscreen mode

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 
}
Enter fullscreen mode Exit fullscreen mode

Transition timing function values

1. linear
2. ease
3. ease-in
4. ease-out
5. ease-in-out
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)