CSS Transitions

Transitions control the speed at which an element changes its CSS state. Transitions are most commonly associated with the change to and from the ":hover" state.

Basic Transition

To use a transition, add the desired transition to the unhovered state of an element. The example below scales an image when the mouse hovers over it.

Example of basic transitions (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
/* Apply transition to all images of class "smooth" */
img.smooth
{
   transition : 0.5s;
}

img:hover
{
   transform:scale(1.5);
}
</style>
</head>

<body>

<img src = "images/dkit04.gif">
<img class = "smooth" src = "images/dkit04.gif">

</body>
</html>

Delaying the Start of a Transition

In the example below, the image on the left has a delayed start.

Example of delayed start transition (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
img.delayed
{
   transition : 0.5s;
   
   transition-delay: 1s;         
}

img.smooth
{
   transition : 0.5s;
}

img:hover
{
   transform:scale(1.5);
}
</style>
</head>

<body>

<img class = "delayed" src = "images/dkit04.gif">
<img class = "smooth" src = "images/dkit04.gif">

</body>
</html>

Limiting A Transition Effect

A transition can be limited, so that it only applies to some of the CSS effects that result from a change in state of an element. In the example below, the first image is limited to only apply to the scaling of the image. The second image uses the transition for both the scaling and opacity.

Example of a limited transition (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
img.smooth
{
   transition : 5s;
}

img.limited
{
   transition : transform 5s;  /* Only do transition on transform */
}

img:hover
{
   transform:scale(1.5);   /* both images will use a transition for the transform */
   
   opacity:0.2;     /* The img of class "limited" will not use a transition for opacity. */
                    /* Instead, it will change opacity immediately */
}
</style>
</head>

<body>

<img class = "limited" src = "images/dkit04.gif">
<img class = "smooth" src = "images/dkit04.gif">

</body>
</html>

Transition Timing

By default, transitions start slowly, then speed up and finally end slowly. Various timing options can be applied to a transition.

Ease
Transition starts slowly, then speeds up, then finishes slowly. This is the default value.
(equivalent to cubic-bezier(0.25, 0.1, 0.25, 1))
Ease-in
Transition starts slowly
(equivalent to cubic-bezier(0.42, 0, 1, 1))
Ease-out
Transition ends slowly
(equivalent to cubic-bezier(0, 0, 0.58, 1))
Ease-in-out
Specifies a transition effect with a slow start and finish. Ease-in-out is similar to ease, except that ease-in-out starts slightly faster than it ends.
(equivalent to cubic-bezier(0.42, 0, 0.58, 1)).
Linear
Transition has the same speed from start to finish.
(equivalent to cubic-bezier(0, 0, 1, 1)).
Cubic-Bezier(n,n,n,n)
A programmer can define their own cubic-bezier function to control timing. For example, the cubic-bezier function (0, 1, 1, 0) will cause a very fast start and finish with a slow transition in the middle.
(n is in the range 0 to 1).
Steps(n)
This will cause the transition to occur in n discrete steps.

A graph of (time, speed) for each of the various transitions is shown below.

default
ease
(0.25, 0.1), (0.25, 1)
ease-in
ease-in
(0.42, 0), (1, 1)
ease-out
ease-out
(0, 0), (0.58, 1)
ease-in-out
ease-in-out
(0.42, 0), (0.58, 1)
cubic-bezier
linear
(0, 0), (1, 1)
cubic-bezier
cubic-bezier
(0, 1), (1, 0)
Time(x) versus Speed(y)

The example below shows the use of the various timing functions. An interactive timing function diagram is available at this link.

Example code for various transition timing functions (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
img
{
    width : 100px;
   
transform-origin: 0 0; /* Scale from top left corner instead of from centre of img */ transition : 2s; } img.ease { transition-timing-function : ease; } img.ease_in { transition-timing-function : ease-in; } img.ease_out { transition-timing-function : ease-out; } img.ease_in_out { transition-timing-function : ease-in-out; } img.linear { transition-timing-function:linear; } img.cubic_bezier { transition-timing-function : cubic-bezier(0, 1, 1, 0); } img.steps { transition-timing-function:steps(10); } img:hover { transform:scaleY(15); } </style> </head> <body> <img class = "ease" src = "images/dkit04.gif"> <img class = "ease_in" src = "images/dkit04.gif"> <img class = "ease_out" src = "images/dkit04.gif"> <img class = "ease_in_out" src = "images/dkit04.gif"> <img class = "linear" src = "images/dkit04.gif"> <img class = "cubic_bezier" src = "images/dkit04.gif"> <img class = "steps" src = "images/dkit04.gif"> </body> </html>

Shorthand

Transitions can be written in shorthand as:

transition [css_property] duration timing_function delay

In the example below, both images behave the same way.

Example of transition shorthand (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
img.separate
{
   transition : 0.5s;
   transition-timing-function: linear;      
   transition-delay: 1s;              
}

img.shorthand
{
  transition: 0.5s linear 1s;        
}


img:hover
{
   transform:scale(1.5);
}
</style>
</head>

<body>

<img class = "separate" src = "images/dkit04.gif">
<img class = "shorthand" src = "images/dkit04.gif">

</body>
</html>

Write code to cause an animated image transition when the user moves the mouse over an image, as shown here.

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>