DEV Community 👩‍💻👨‍💻


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

So, let's start with some basics.

Syntax :

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.

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



cubic-bezier -

Top comments (0)

Classic DEV Post

brain computer interface

Experimenting with brain-computer interfaces in JavaScript