Categories

CSS Transitions

Posted on: November 29, 2015 by Dimitar Ivanov

The normal behavior, when you change the state of an element, is to happen instantly. With using of CSS transitions, you can slow down the changes and adjust the effect how they will be applied.

CSS properties

The best way to setup the CSS Transitions is to use the shorthand property transition. However you can always use a combination of following sub-properties:

  • transition-property - specifies the name of the CSS property to which the transition is applied.
    Value: none | all | color | background-color | opacity | height | width | left | top | ... basically any property that accept numeric values, and could be calculated.
    Initial: all
    transition-property: all;
    
  • transition-duration - defines the length of time that a transition takes.
    Value: <time>
    Initial: 0s
    transition-duration: 0.5s;
    
  • transition-timing-function - describes how the intermediate values used during a transition will be calculated. However, it's optional.
    Value: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps | cubic-bezier
    Initial: ease
    transition-timing-function: ease-in-out;
    
  • transition-delay - defines when the transition will start. Also, it's optional.
    Value: <time>
    Initial: 0s
    transition-delay: 1s;
    
  • transition - a shorthand property that combine the above four properties.
    /* transition: [property] [duration] [timing-function] [delay]; */
    transition: all 0.5s ease-in-out 1s;
    

Multiple animated properties

To define multiple transitions on a single element note that the transition properties support comma-separated list of values.

div {
    transition: width 1s, color 2s;
}
p {
    transition-property: width, color;
    transition-duration: 1s, 2s;
}

Transition events

When the transition ends the transitionend event will be fired for each of transitioned properties.

  • transitionend - available attributes are:
    • propertyName - The name of the CSS property associated with the transition.
    • elapsedTime - The amount of time the transition has been running when this event occurs.
    • pseudoElement - The name of the CSS pseudo-element on which the transition occurred, or the empty string if the transition occurred on an element.
    element.addEventListener("transitionend", function (event) {
        //transition finished
        console.log(event.propertyName);
        console.log(event.elapsedTime);
        console.log(event.pseudoElement);
    }, true);
    

Vendor prefixes

Current browsers support transition properties without prefixes. But if you intend to support all versions of compatible browsers (see below), vendor-specific prefixes are available: -webkit-, -moz- and -o-.

div {
    -webkit-transition: all 0.5s ease-out 1s;
    -moz-transition: all 0.5s ease-out 1s;
    -o-transition: all 0.5s ease-out 1s;
    transition: all 0.5s ease-out 1s;
}

Working demo

The example below demonstrates how to start a transition and capture its end.

Browser Compatibility

  • Chrome 4+
  • Firefox 4+
  • IE 10+
  • Opera 11.5+
  • Safari 3.1+
Transition vs. Animation

The most important difference between CSS transition and CSS animation is how they are triggered. A transition occurs when the element state or property is changed. For example color change on hover; change of width on click using javascript. While transitions are easier to use, the animations offer more control over how the states are animated.

See also
References
Share this post

Thank you so much for reading! Leave a comment below with your thoughts about css transitions. If you like this blog post - go share it.


0 Comments

Comments are closed