Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Transition

DZone's Guide to

CSS Transition

In this post, a front-end developer and web designer takes a look at this CSS property and how it can be applied to your web applications.

· Web Dev Zone ·
Free Resource

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences.

So, we've moved from text and color in web design to unique, bombshell, explosions... OK, not that much, but we've moved. CSS follows and supports those changes and, because of that, we have the transition option.

About Transition

The transition property allows you to change the values of the CSS properties smoothly.

It is necessary to define a property that will be changed and the duration of the effect.

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

These two values can be defined with the universal property transition or with the individual properties, transition-property and transition-duration.

Some of the transition-property values I can remember at the moment are:

  • width
  • height
  • color
  • background (color, image, position)
  • transform (in the next post)
  • border (color, width)
  • position (top, bottom, left, right )
  • text (size, weight, shadow, word-spacing)
  • margin
  • padding
  • opacity
  • visibility
  • z-index
  • all

If the value is defined with a property, it defines a comma-separated list of CSS property names which the transition effects. The valueall is the default one and defines all the properties that can transition will transition. In this case, all changed properties will have a transition with the same duration (and delay and timing if defined).

The transition-duration property is very simple, it defines how much time a transition effect takes to complete, and its value can be defined in seconds (s) or milliseconds (ms).

More Transition Options

Additional properties connected to transition are:

  • transition-delay
  • transition-timing-function

Very similar to the duration property, transition-delay is defined with seconds (s) or milliseconds (ms) and specifies when the transition effect will start. This property can be negative, unlike the duration property, and if negatively defined it will begin part-way through its play cycle.

The transition-timing-function property is defined by the following functions:

  • ease - slow start, fast middle, slow end.
  • ease-in - slow start, fast end.
  • ease-out - fast start, slow end.
  • ease-in-out - more pronounced acceleration/deceleration.
  • cubic-bezier(n,n,n,n) - you can write your own function defined with 4 coordinates (cubic bezier functions).
     button{
       transition: background 1s ease-in-out 2s;
       -webkit-transition: background 1s ease-in-out 2s; /* Safari */
     }

With the universal property transition, you can define all four properties, just keep in mind that the first time you define a duration you always usetransition-duration.

It's possible to make a set of multiple transitions. To split different transitions use ,.

   button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

Triggering

The main thing to remember about the transition is that this property is defined before its use and it runs only if it's triggered (i.e., if the property which is defined with transition-property is changed).

You can trigger CSS transitions directly with pseudo-classes like :hover:focus,  and :active or through JavaScript by adding or removing classes.

Conclusion

This property is widely supported so use it! If you need some inspiration, check out this example.

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Topics:
web dev ,css ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}