Animation with CSS3: Simple transitions

Animation with CSS3: Simple transitions

CSS3 is exciting (well at least I think so :)), as it allows animations to be carried out on HTML elements to move them, change their colour and size, etc. In this post, I’ll be looking at the basics of how CSS3 transitions work, with a few examples along the way.

Transition effects can be applied to any HTML element; for example, a div, span, p tag, a tag – anything you like.

Please note: I have not included vendor prefixes within my markup examples, as it would just take up too much needless space, so if you’re not using PrefixFree like I am, you’ll need to add these in yourself for the different browsers.

Syntax

Properties overview

Transition properties are applied to the object that is to be animated; specifying which property of an element to be animated (e.g. background colour, border width), the duration of the animation and the time delay before it starts running. Let’s see briefly what these properties do, and I’ll add some examples of each a bit further on…

  • transition-property: Any CSS property can be specified here to allow the animation to affect just that property (e.g. background, color, padding, etc.), or the transformations can be applied to all properties within the element;
  • transition-duration: Duration is the amount of time the animation takes to complete from start to finish, and it is written in seconds. Duration of an animation must be set, or the animation will not run;
  • transition-timing-function: Otherwise known as easing. Easing controls the speed of the animation at certain points. It isn’t absolutely necessary to add the easing function if not required, and the animation will still run. If no easing controls are added, it defaults to ease-in-out;
  • transition-delay: A delay measured in seconds can be added at the beginning of the animation. If not added, there will be no delay as default.

The markup

In my examples, the demos will be applied to an empty div element.

View markup

CSS portion

div {
	transition-property: value;
	transition-duration: value;
	transition-timing-function: value;
	transition-delay: value;
}

HTML portion

<div></div>

Shorthand CSS markup

Instead of adding in all the properties separately, they can be shortened into one line as follows. The order doesn’t matter, but the duration of the animation is the first number in seconds, and the delay is the second:

View markup

div {	
	transition: property duration timing-function delay;
}

Transition property examples

Here I’ll be going through the transition properties mentioned above, explaining which values can be used for each and giving examples. For all the examples I create in this post, I’ll use a div styled to be a 200×200 pixel square with a blue background, and the transition will happen on the hover state (when the mouse is passed over the element) for simplicity’s sake.

transition-property

This is used to specify what CSS property/properties that are to be transitioned.

Changing a singular property

In this example, I’m only changing the background property of the div from blue to orange with the animation initiating on the hover state. No other properties will be affected.


Changing a single property with a CSS3 transition

View demo

The markup

In the styles for the div, I specify which background colour I would like it to start out with (blue/#0cf), as well as specifying the value of background-color for transition-property. Then under the styles for the hover state of the div, I specify the colour which I’d like it to change to at the end of the animation (orange/#fc0). When the animation runs, the div should fade from blue to orange. I also had to add a duration or the animation would not run (it would just flick immediately to the animated state), so I specified it to be two seconds.

View markup

CSS portion
div {
	background-color: #0cf;
	transition-property: background-color;
	transition-duration: 2s;
}

div:hover {
	background-color: #fc0;
}
HTML portion
<div></div>

Changing multiple properties

In this example, multiple single properties are being animated together. The colour change from blue to orange occurs as in the previous example, as well as an increase in padding on the right side of the div from 0 to 100px, which makes it look like it is expanding to the right.


Changing multiple properties with a CSS3 transition

View demo

The markup

Multiple single properties can be affected by listing them one after another and separating them by commas.

View markup

CSS portion
div {
	background-color: #0cf;
	padding: 0;
	transition-property: background-color, padding-right;
	transition-duration: 2s;
}

div:hover {
	background-color: #fc0;
	padding-right: 100px;
}
HTML portion
<div></div>

Changing all properties

In this example, all properties of the element are changed, so there is no need to specify separate elements. As in the example above, colour and padding CSS classes of the div are changed throughout the course of the animation, as well as the colour of the border, which changes from black to red.


Changing all properties with a CSS3 transition

View demo

The markup

The value of all is added to transition-property to animate all properties.

View markup

CSS portion
div {
	background-color: #0cf;
	padding: 0;
	border: 5px solid #000;
	transition-property: all;
	transition-duration: 2s;
}

div:hover {
	background-color: #fc0;
	padding-right: 100px;
	border: 5px solid #f00;
}
HTML portion
<div></div>

transition-duration

Duration is the amount of time the transition takes to complete from start to finish; it is written in seconds. Duration of a transition must be set or it will not run; it will just immediately flick from one state to the next. I need to use this for all animations, so I don’t think it needs a specific visual example, so for this I will show the markup only:

The markup

Duration is very simple, the number of seconds just needs to be specified as the value. Obviously the higher the value, the longer the transition will run for.

View markup

CSS portion
div {
	transition-duration: 2s;
}

transition-timing-function

This controls the easing of the transition. Easing controls the speed of the transition at certain points. It isn’t absolutely necessary to add the easing function if not required, and the transition will still run with the default value of ease-in-out. There are several possible values for this property, which are covered here – I have shown how the speed is controlled by increasing the padding to the right of the div as the transition progresses so it looks like it is expanding out to the right:

linear

The transition runs at a steady pace.


CSS3 transition with linear easing

View demo

The markup
View markup

CSS portion
div {
	padding-right: 0;
	transition-property: padding-right;
	transition-duration: 3s;
	transition-timing-function: linear;
}

div:hover {
	padding-right: 400px;
}
HTML portion
<div></div>

ease-in

The transition starts off slow and speeds up towards the end.


CSS3 transition with ease-in easing

View demo

The markup
View markup

CSS portion
div {
	padding-right: 0;
	transition-property: padding-right;
	transition-duration: 3s;
	transition-timing-function: ease-in;
}

div:hover {
	padding-right: 400px;
}
HTML portion
<div></div>

ease-out

The transition starts off at a fast pace and slows down towards the end.


CSS3 transition with ease-out easing

View demo

The markup
View markup

CSS portion
div {
	padding-right: 0;
	transition-property: padding-right;
	transition-duration: 3s;
	transition-timing-function: ease-out;
}

div:hover {
	padding-right: 400px;
}
HTML portion
<div></div>

ease-in-out

The transition starts off slow, speeds up in the middle and slows down again towards the end.


CSS3 transition with ease-in-out easing

View demo

The markup
View markup

CSS portion
div {
	padding-right: 0;
	transition-property: padding-right;
	transition-duration: 3s;
	transition-timing-function: ease-in-out;
}

div:hover {
	padding-right: 400px;
}
HTML portion
<div></div>

cubic-bezier

You can specify exactly how fast you want your transition to run throughout by using the idea of the bezier curve. I personally get confused about this, but I found this CSS cubic-bezier builder which may be of some use! My example starts off fast, slows down completely, and then starts to pick up speed again towards the end.


CSS3 transition with cubic-bezier easing

View demo

The markup

The value cubic-bezier is used for transition-timing-function, and four numbers are placed in brackets which relate to the bezier curve determining the speed of the transition.

View markup

CSS portion
div {
	padding-right: 0;
	transition-property: padding-right;
	transition-duration: 3s;
	transition-timing-function: cubic-bezier(.03,.84,.35,.21);
}

div:hover {
	padding-right: 400px;
}
HTML portion
<div></div>

transition-delay

A delay can be added at the beginning of the transition; it is measured in seconds. If not added, there will be no delay to the transition as default.


CSS3 transition with half a second delay at the beginning

View demo

The markup

In this example, I have added the value .5s to the transition-delay property so that before the transition starts, there will be a half second wait.

View markup

CSS portion
div {
	padding-right: 0;
	transition-property: padding-right;
	transition-duration: 2s;
	transition-delay: .5s;
}

div:hover {
	padding-right: 400px;
}
HTML portion
<div></div>

Leave a Reply

Your email address will not be published. Required fields are marked *