CSS3 Transitions - Introduction

This is one of the chapters I have been most excited about - the introduction to CSS3 transitions! CSS transitions are a presentational effect which allow you to create property changes which occur on e.g. mouse-over or mouse-click.

The CSS3 transitions modules introduces four new properties;

• Which property or properties to target - transition-property
• The duration of the given transition - transition-duration
• The timing function of the transition - transition-timing-function
• And an optional possibility to delay the transition - transition-delay

CSS3 transition-property

The transition property specifies which property the transition is applied to - be it color, background, border, and so forth!

CSS3 transition-duration

This property specifies how many second or milliseconds a transition takes to complete. The default is 0 and a good advice is to never specify a duration shorter than 5-6 milliseconds as the human eye will have troubles recognizing this as transition instead of just a change.

Css3 transition-timing-function

With the transition timing function, you can change the speed-curve of the transition effect.

• Linear
• Ease-in - Specifies a transition with a slow start
• Ease-out - Specifies a transition with a slow end
• Ease-in-out - Specifies a transition with a slow start and end.
• Cubic-beizer(n,n,n,n) - Defines your own transition timing. Possible values ranges from 0 to 1. As this is one of the functions you probably won't ever have to use I am not going to go deeper into it.

Luckily, all of these four transitions can be combined into just one property - the transition property.

I think it is about time to show an example, right? The following example is a transition from the color 'Crimson' to 'CornFlowerBlue' with a transition which takes 2 second, eases in (speeding up) and no delay. If we used the individual transition properties, it would look like this:

transition-property: all;
transition-duration: 2sec;
transition-timing-function: ease-in;
transition-delay: 0;

Using the combined method, the transition property, it looks like this;

transition: all 2s ease-in 0;

Using the individual transition-declarations is a good idea when you are new to CSS3 as it tells you exactly which value you are working with, but using the combined declaration may be timesaving in the lon run. (If you are using a smart webeditor, you will be writing code so efficiently that it doesn't really matter which option you choose.)

Simple background transition

<style>
.bg-transition {
padding: 15px;
text-align: center;
background-color: Crimson;
width: 90%;
min-height: 25px;
transition: all 2s ease-in 0;
-webkit-transition: all 2s ease-in 0;}

.bg-transition:hover {
background-color: CornFlowerBlue;
}
</style>

<p class="bg-transition"> </p>

This simple color transition can be used on text and borders as well and adds a nice detail to e.g. link-hovers. Instead of using the background-color property you just use the color or the border property - and remember to change it in the :hover pseudo class too.

Styled background transition

<style>
.bg-transition {
padding: 15px;
border: 10px solid #2f2f2f;
font-size: 30px;
text-align: center;
font-family: 'Yanone Kaffeesatz', sans-serif;
background-color: rgba(163,169,169,0.3);
transition: all 2s;
-webkit-transition: all 1.2s ease-in;}

.bg-transition:hover {
background-color: rgba(47,47,47,1);
}
</style>

<p class="bg-transition">P-O-W-E-R-!</p>

Tip!

Adding a 20-30 millisecond delay to your transitions is a good idea if you have a group of transitions right next to each other. Your user will not actually see the delay but it will make the transitions seem steadier if all of the transitions are triggered within few milliseconds.