Subscribe to andrewsw's Blog        RSS Feed

A Quick (CSS) Transition

Icon Leave Comment
Typically, people use jQuery mouseenter and mouseleave (or hover) events when all they are doing is changing and/or animating css properties, then changing them back again. They could just use css :hover to change the properties back and forth. But, in particular, the animations are more easily, and more effectively, achieved using CSS3 transitions.

In this example a boxes' height and change of background colour are animated when hovered over. One of the cool things about this is that we don't have to write code, or additional css, to reset these properties to their original values when no longer hovered.
<!DOCTYPE html>
    <title>CSS3 Transition</title>
<style type="text/css">
#whehay {
    width: 100px;
    height: 100px;
    background: green;
    -webkit-transition: height 1s linear, background 1s ease;
    -moz-transition: height 1s linear, background 1s ease;
    -o-transition: height 1s linear, background 1s ease;
    transition: height 1s linear, background 1s ease;

#whehay:hover {
    height: 150px;
    background: blue;
<div id="whehay">Hover Me!</div>

The css for #whehay sets all the original/default values. The transition property specifies what properties will be animated, how long the transition takes (both when applied and removed) and what effect (timing function) to use, although this last is not essential, defaulting to 'ease'. Note that different properties are separated by a comma.

(Not every property can be transitioned - at least, not consistently across all browsers - but many can.)

I have specified three vendor prefixes for the different browsers. I haven't investigated this but I get the impression that only the first (-webkit) and the last are typically used these days, unless you are really intent on supporting older browsers. Investigate this.

The css for #whehay:hover then sets properties when the element is hovered. Any properties that have been specified in the transition property will be animated.

hover is how these transitions are typically applied, although changes to css-properties using Javascript or jQuery will also cause them to occur. So, you can still use jQuery to change css-properties, but let css handle the animation.

As I mentioned, this is just a quick example and it is not a subject I have studied in any depth:

Using CSS Transitions :MDN
CSS3 Transitions :w3schools
transition: css-tricks

I have used the term animation a few times. A css transition is a simple animation of a css property from one value to another value. css animations extend this idea, allowing you to specify different stages (keyframes) of the animation. You can control timings, duration and effects, and a number of other sub-properties.

The animation will start when the element is rendered on the page, or JS/jQuery can be used to add a class to an element, triggering the animation. :hover can also be used.

0 Comments On This Entry


Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

December 2020

  1 2 345


    Recent Entries

    Recent Comments

    Search My Blog

    0 user(s) viewing

    0 Guests
    0 member(s)
    0 anonymous member(s)