Scribd
Upload
101 views

Using CSS Transitions - Web Developer Guide - MDN

CSS transitions allow properties to change values over time instead of immediately. They are defined using the transition property, which controls the properties that are animated, duration, timing function, and delay. Common uses include fading elements in/out and highlighting menu items on hover with smooth color/background changes.

Uploaded by

José A. Moreno
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
101 views

Using CSS Transitions - Web Developer Guide - MDN

CSS transitions allow properties to change values over time instead of immediately. They are defined using the transition property, which controls the properties that are animated, duration, timing function, and delay. Common uses include fading elements in/out and highlighting menu items on hover with smooth color/background changes.

Uploaded by

José A. Moreno
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Using CSS transitions - Web developer guide | MDN

23/12/2014 10:01 p.m.

Using CSS transitions


CSS transitions, which are part of the CSS3 set of specications, provide a way to control
animation speed when changing CSS properties. Instead of having property changes take eect
immediately, you can cause the changes in a property to take place over a period of time. For
example, if you change the color of an element from white to black, usually the change is
instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an
acceleration curve, all of which can be customized.
Animations that involve transitioning between two states are often called implicit transitions as
the states in between the start and nal states are implicitly dened by the browser.

CSS transitions let you decide which properties to animate (by listing them explicitly), when the
animation will start (by setting a delay), how long the transition will last (by setting a duration), and
how the transition will run (by dening a timing function, e.g. linearly or quick at the beginning,
slow at the end).

Note: CSS transition properties can be used without any prex provider, but since the
specication has only recently achieved stability, the vendor prexes can still be necessary for
browsers based on WebKit. They are also necessary for compatibility with older browser versions
(e.g.: Firefox 15 and earlier, Opera 12 and earlier). A compatibility table is available at the
bottom of this page with more information.

Which CSS properties are animatable?


The Web author can dene which property has to be animated and in which way. This allows the
creation of complex transitions. As it doesn't make sense to animate some properties, the list of
animatable properties is limited to a nite set.

Note: The set of properties that can be animated is subject to change. Developers should
proceed with caution.

Also the auto value is often a very complex case. The specication asks not to animate from and
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 1 of 8

Using CSS transitions - Web developer guide | MDN

23/12/2014 10:01 p.m.

to such a value. Some user agents, like those based on Gecko, implement this requirement and
others, like those based on WebKit, are less strict. Using animations with auto may lead to
unpredictable results, depending of the browser and its version, and should be avoided.
Care should also be taken when using a transition immediately after adding the element to the
DOM using .appendChild() or removing its display: none; property. This is seen as if the
initial state had never occurred and the element was always in its nal state. The easy way to
overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before
changing the CSS property you intend to transition to.

Multiple animated properties example


HTML Content
1
2

3
4

<body>
<p>The box below combines transitions for: width, height, background-co
<div class="box"></div>
</body>

CSS Content
1
2
3
4
5
6
7

8
9
10
11
12
13
14
15
16
17

.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-tr
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}

The box below combines transitions for: width, height, background-color, transform. Hover
over the box to see these properties animated.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 2 of 8

Using CSS transitions - Web developer guide | MDN

23/12/2014 10:01 p.m.

CSS properties used to dene transitions


CSS Transitions are controlled using the shorthand transition property. This is the best way to
congure transitions, as it makes it easier to avoid that the lengths of the parameter list are out
of sync, which can be very frustrating to have to spend lots of time debugging the CSS.
You can control the individual components of the transition with the following sub-properties:
(Note that these transitions loop innitely only for the purpose of our examples; CSS
transition
transitions only visualize a property change from start to nish. If you need visualizations
that loop, look into the CSS animation property.)
transition-property
Species the name or names of the CSS properties to which transitions should be applied.
Only properties listed here are animated during transitions; changes to all other properties
occur instantaneously as usual.
transition-duration

Lorem

transition-duration: 2s

Lorem
transition-duration: 4s

Lorem

Lorem

Species the duration over which transitions should occur. You can specify a single duration
that applies to all properties during the transition, or multiple values to allow each property to
transition over a dierent period of time.
transition-duration: 0.5s
transition-duration: 1s

transition-timing-function
Species a function to dene how intermediate values for properties are
computed. Timing functions determine how intermediate values of the
transition are calculated. Most timing functions can be specied by
providing the graph of the corresponding function, as dened by four
points dening a cubic bezier. You can also choose easing from ! Easing
Functions Cheat Sheet.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 3 of 8

Using CSS transitions - Web developer guide | MDN

23/12/2014 10:01 p.m.

transition-timing-function:

transition-timing-function:

ease

linear

Lorem

Lorem

transition-timing-function:

transition-timing-function:

step-end

steps(4, end)

Lorem

Lorem

transition-delay
Denes how long to wait between the time a property is changed and the transition actually
begins.
transition-delay: 0.5s

transition-delay: 1s

Lorem

transition-delay: 2s

Lorem

transition-delay: 4s

Lorem
Lorem

The shorthand CSS syntax is written as follows:

1
2
3

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

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 4 of 8

Using CSS transitions - Web developer guide | MDN

23/12/2014 10:01 p.m.

Detecting the completion of a transition


There is a single event that is red when transitions complete. In all standard-compliant browser,
the event is transitionend, in WebKit it is webkitTransitionEnd. See the compatibility table
at the bottom for more. The transitionend event oers two properties:
propertyName
A string indicating the name of the CSS property whose transition completed.
elapsedTime
A oat indicating the number of seconds the transition had been running at the time the event
red. This value isn't aected by the value of transition-delay.
As usual, you can use the element.addEventListener() method to monitor for this event:

el.addEventListener("transitionend", updateTransition, true);

Note: The transitionend event doesn't re if the transition is aborted because the animating
property's value is changed before the transition is completed.

When property value lists are of dierent


lengths
If any property's list of values is shorter than the others, its values are repeated to make them
match. For example:

1
2
3
4

div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}

This is treated as if it were:

1
2
3
4

div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}

Similarly, if any property's value list is longer than that for transition-property, it's truncated,
so if you have the following CSS:

1
2
3
4

div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 5 of 8

Using CSS transitions - Web developer guide | MDN

23/12/2014 10:01 p.m.

This gets interpreted as:

1
2
3
4

div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}

A simple example
This example performs a four-second font size transition with a two-second delay between the
time the user mouses over the element and the beginning of the animation eect:

1
2
3
4
5
6
7

#delay1 {
position: relative;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 14px;
}

8
9
10
11
12
13
14

#delay1:hover {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 36px;
}

Using transitions when highlighting menus


A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over
them. It's easy to use transitions to make the eect even more attractive.
Before we look at code snippets, you might want to ! take a look at the live demo (assuming your
browser supports transitions). You can also take a ! look directly at the CSS it uses.
First we set up the menu using HTML:

1
2
3
4
5
6

<div class="sidebar">
<p><a class="menuButton"
<p><a class="menuButton"
<p><a class="menuButton"
<p><a class="menuButton"
</div>

href="home">Home</a></p>
href="about">About</a></p>
href="contact">Contact Us</a></p>
href="links">Links</a></p>

Then we build the CSS to implement the look and feel of our menu. The relevant portions are
shown here:

1
2
3

.menuButton {
position: relative;
transition-property: background-color, color;

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 6 of 8

Using CSS transitions - Web developer guide | MDN

transition-duration: 1s;
transition-timing-function: ease-out;
text-align: left;
background-color: grey;
left: 5px;
top: 5px;
height: 26px;
color: white;
border-color: black;
font-family: sans-serif;
font-size: 20px;
text-decoration: none;
box-shadow: 2px 2px 1px black;
padding: 2px 4px;
border: solid 1px black;

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

23/12/2014 10:01 p.m.

}
.menuButton:hover {
position: relative;
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
background-color:white;
color:black;
box-shadow: 2px 2px 1px black;
}

This CSS establishes the look of the menu, with the background and text colors both changing
when the element is in its :hover state.
Instead of describing the eect at length, you can take a look at the live sample if your ! browser
has transitions support.

Using transitions to make JavaScript


functionality smooth
Transitions are a great tool to make things look much smoother without having to do anything to
your JavaScript functionality. Take the following example.

1
2

<p>Click anywhere to move the ball</p>


<div id="foo"></div>

Using JavaScript you can make the eect of moving the ball to a certain position happen:

1
2
3
4
5

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
f.style.left = (ev.clientX-25)+'px';
f.style.top = (ev.clientY-25)+'px';
},false);

With CSS you can make it smooth without any extra eort. Simply add a transition to the element
and any change will happen smoothly:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 7 of 8

Using CSS transitions - Web developer guide | MDN

23/12/2014 10:01 p.m.

p {
padding-left: 60px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#foo {
border-radius: 50px;
width: 50px;
height: 50px;
background: #c00;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}

You can play with this here: ! http://jsddle.net/RwtHn/5/

Specications
Specication

Status

CSS Transitions

WD

Working Draft

Comment
Initial specication.

Browser compatibility
Desktop

Mobile

Feature

Chrome

Firefox Internet
Opera
(Gecko) Explorer

Basic support

1.0

4.0 (2.0)

-w e bk i t

26.0

10

10.5

Safari (WebKit)
-o

3.2

- w eb ki t

12.10

- m oz

16.0
(16.0)
transitionend 1.0 as
4.0 (2.0)
webkitTransitionEnd
event
26.0? as
transitionend

10

10.5 as
3.2 as
oTransitionEnd webkitTransitionEnd
12 as
6.0? as transitionend
otransitionend
12.10 as
transitionend

See also
!!

CSS3 Dock Menu using CSS transitions

The TransitionEvent interface and the transitionend event.


Transitions-related properties: transition, transition-delay, transitionduration, transition-property, transition-timing-function

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Page 8 of 8

You might also like