Transition CSS

skwebdeveloper — Tue, 08 Dec 2020 05:45:55 +0000

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

Dark mode

skwebdeveloper — Fri, 20 Nov 2020 13:08:11 +0000

DEV Community: skwebdeveloper