Exploring CSS3 Transitions and Animations with Examples – Part 2

In the first part of this tutorial on CSS3 Transitions and Animations, we told you about what Transitions and Animations are in CSS3. And we also covered the CSS3 Transitions with an example including all of its properties. But in this second part of the tutorial, we will explore all Transition properties one by one with which your all doubts regarding CSS3 Transitions would get cleared.

So let’s begin with the first property of CSS3 Transitions, and as we move on further we will explain each and every CSS3 Transitions property with demo. Apart from this, we will also provide you with a list of all transitional properties that you can define inside transition-property.

Transition-property

The first transitional property i.e., transition-property is the one that defines the properties that will be transformed in combination with all other transitional properties. However, by default all the transitional properties of an element get altered when the transition effect takes place. But, the value of the properties that will be affected by the transitions can only be defined using the transition-property.

In our previous tutorial, we only defined the background as the value in the transition-property. And that’s because only the background gets changed while hovering a mouse over the shape. However, if you add any other property in an element but doesn’t define it within the transition-property value, you won’t see that particular transitions effect come into play.

Moreover, there might be occasions when you will need to execute multiple properties using CSS3 transition-property. In that case, the values can be separated with a comma. Additionally, you can also keep ‘all’ as the value if you want the transitions effect to take place on all the properties of an element.

Here you can see for the transition-property value, we have kept the background, and border-radius. With this, when you’ll hover over the given triangle shape, it will get transformed into a circle with two different background; one the triangle background as a triangle has been formed using border-color, and the actual background, which only comes while hovering the mouse.

HTML

Transitional Properties

As we promised in the beginning, here’s a list of transitional properties that you can use to apply the transitional effects on an element. In addition to this, you must remember that not all properties can be transitioned. Instead, properties having an identifiable halfway point, font-sizes, colors, etc. can be transitioned.

Transition-duration

Transition-duration is the time a transition takes to complete. You can set its value using the general time measuring units, including milliseconds (ms) and seconds (s). The value can also be kept in fractional measurements, for example; .2s.

Moreover, if you want to implement the transition effect completely on your element where multiple properties are to be involved, you can define multiple time durations, one for each included property. Just like you separate the property value of the transition-property, you can define and separate the multiple durations using a comma. However, the order of the defined values when recognizing the involved individual properties and durations matters a lot. For example; the first recognized property within the transition-property will apply the transitional effects as per the first time period defined within the transition-duration property.

If multiple properties are being transitioned with only one duration value declared, that one value will be the duration of all the transitioned properties.

HTML

Transition-timing-function

This transitional property is used to define the speed curve in which a transition will progress. Once you set the duration using the transition-duration property for a transitional effect, it can have multiple speeds within a single duration. Some of the commonly used values for the transition-timing-function property are; linear, ease, ease-in, ease-out, and ease-in-out.

The ‘linear’ value demonstrates a transitional effect moving ahead at a steady speed from a particular state to a new one. The ‘ease-in’ value reflects a transitional effect that progresses slowly in the beginning and soon speeds up and maintain the same till the time transition effect gets completed. The ‘ease-out’ value works exactly the opposite of the ease-in value. When you keep the ease-out value, the transition starts at a great speed but slows down for the entire transition duration. At last but not the least, the ‘ease-in-out’ value identifies a transition that begins slowly, speeds up in the middle, and gets slow at the end.

This property works in a cubic-bezier function, for which the values can also be set specifically. You can keep its value in numeric form. For example; x1, y1, x2, y2. The other values include step-start, step-stop, and a uniquely identified steps (number_of_steps, direction) value.

For transitioning multiple properties at a time, you can define multiple transitional timing functions. And like other transitional property values, these timing function values, can also be defined and separated using a comma.

The HTML

Transition-delay

If you want the transition effect to begin with a little delay, the transition-delay property will come in handy. The value for the delay can be set in milliseconds or seconds, which will inform the browser how long the set transition effect should be held up before executing it completely. Here also you can set the delay for multiple transitions, for which the declared values can separated via comma.

The HTML