WDS82 - CSS Transitions(Part 2)

In the last article, we learned the basics of CSS transitions and also implemented them in one example, where we changed the width of div slowly when we hover over it. We also have seen how to change two properties simultaneously. Now let's move forward to see some more ways to customize the transitions in CSS.

Speed Curve of the Transition

The transition-timing-function property in CSS helps to specify the speed curve of the transition effect. This speed curves decide how speed varies in given duration. This property can have one of the following values:

• ease - This is the default value. In this transition starts effect starts slowly, then fast and ends with slow again.
• linear - In this transition maintains same speed though start to end.
• ease-in - Transition with slow start
• ease-out - Transition with slow end
• ease-in-out - Transition with slow start and slow end
• cubic-bezier(n,n,n,n)- This transition let us define our own values for cubic bezier function

Let's see all the above(except the last one which we will see later) in the code...

Transition Delay

The transition-delay property specifies a delay(in seconds) for the transition effect to start. The transition effect will start after given time. For example in the following code, transition effect will start after 2 seconds and then will work as normal...

div {
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}

Transition + Transformation

We can add both of this things simultaneously. Let's see how... That's all for today. See how easily we created beautiful effects with transitions and transformations. In the next article, we will start animations in CSS to make even better-looking elements.
Till then #keepCoding.