Adobe Creative Cloud

September 8, 2015 /Code /

Getting Started with CSS3 Transitions and Animation

With the introduction of CSS3 properties, effects such as animating page elements previously created with Flash or JavaScript can now be achieved using pure CSS. Using CSS only can help to reduce the load time of a web page. If the only effects required for your project can be accomplished using the techniques outline below, then there’s no need to load an entire library (e.g. jQuery) for a few lines of code.

The transition property can be used to create a smoother transition from one state change to another (e.g. changing link color on hover) that resembles a fade in/fade out effect. The animation property can be used to create a sliding effect. These examples will be outlined below among others!

Vendor Prefixes

CSS vendor prefixes are used to add browser support for new and/or experimental features. Each browser uses its own prefix to render its own version of that property until the property becomes standardized across all browsers.

Android, iOS, Chrome & Safari:-webkit-
Internet Explorer: -ms-
Firefox: -moz-
Opera: -o-

The prefix gets applied to the property name like so:

-webkit-property-name
-moz-property-name
-ms-property-name
-o-property-name

Vendor prefixes are temporary

As newer versions of browsers are released and these properties become part of the official CSS specifications, the prefixes are no longer needed.
To future proof your CSS, list the standard property last, since CSS renders the properties from top to bottom (unless a more specific selector is used). Browsers will ignore the properties it doesn’t understand and move onto the next.

-webkit-property-name: 10px 5px;
property-name: 10px 5px;

These days, fewer properties require prefixes so it’s good to have some handy resources like caniuse.com or tools like Grunt, Gulp or CodeKit to stay on top of the changes.

CSS3 Transition

Use this property to add gradual CSS transitions whenever a state change occurs (e.g. :target, :hover, :focus or :active). Using any combination of these four transition properties:

transition-property: choose which properties to animate (e.g. color, padding or all)
transition-duration: how long the change will take to animate, set in seconds (s) or milliseconds (ms)
transition-timing-function: set an acceleration curve to vary the speed over its duration
transition-delay: use this to delay the start of the animation, also set in seconds or milliseconds

More about the various transition-timing-function options here.

In the example below, the property being changed is the background color. The change will take 1 second to complete, display in a linear speed and will be delayed for 0.5 seconds.

.box {
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 0.5s;
}
.box:hover {
  background: #ff7b29;
}

This can also be written using shorthand syntax by using just the transition property.

.box {
  background: #2db34a;
  transition: background 1s linear 0.5s;
}
.box:hover {
  background: #ff7b29;
}

In the example below, hover over the box to see the transition in action!

See the Pen RWbqpp by christinatruong (@christinatruong) on CodePen.

Important: Not all CSS properties can be transitioned. Only properties that have an identifiable halfway point like color or font-size can be used. To define multiple transitions, separate each statement with a comma.

transition: background .2s linear, border-radius 1s ease-in 1s;

As long as a comma separates the statements, you can put them on separate lines for organization.

transition: background .2s linear, 
            border-radius 1s ease-in 1s;

To target all properties that can be transitioned, set the value to all.

transition: all 1s linear;

Put the transition property in the declaration where the changes are supposed to start.

div { 
  margin-left: 0; 
  transition: all 1s linear 1s; 
} 

div:hover { 
  background: #222; 
  color: lightblue; 
  margin-left: 500px; 
}

A great way to add some pizzaz to your web page is to use animations for hover states on links. See the example below and try hovering over the links!

See the Pen ZbzVwK by christinatruong (@christinatruong) on CodePen.

CSS3 Animations

Transitions are great for visual effects from one state to another but when more control is required, transitions need to have multiple states.

To set multiple points for different transitions, use the @keyframes rule. The @keyframes rule includes an animation name, of your own choosing, animation breakpoints and the properties to be animated.

Creating the animation

First, name your animation using the below syntax. The name should not include any spaces. Don’t forget to check if a prefix is required! The prefix must be included after the @ symbol.

@-webkit-keyframes my-animation-name { }
@keyframes my-animation-name { }

Though you can name it anything, try using a name that describes the animation.

@keyframes vertical-slide { }

To create different breakpoints for the animations, use any percentage amount. 0% refers to the beginning of the animation, 100% is the end of an animation. You can use any additional percentage amount and breakpoints in between.

Include the breakpoints between the first set of curly braces and the properties to be animated between each breakpoint.

@keyframes vertical-slide {
  0% {
    top: 0px;
  }
  50% {
    top: 300px;
  }
  100% {
    top: 800px;
  }
}

Note that animations can include any number of properties but can only be applied to the same property. For example, animating from top: 0; to bottom: 0; will not work but declaring top: 0; to top: 200px will work just fine.

Using the animation

The @keyframes rule just creates the animation but to use it, it must be assigned to an element.

Use the animation-name property and the name of the @keyframes as the property value. Also, be sure to declare the animation-duration property so the browser knows how long the entire animation should take to complete.

.to-be-animated {
  animation-name: vertical-slide;
  animation-duration: 2s;
}

Similar to transitions, a timing function and delay can be declared as well, using the animation-timing-function and animation-delay properties.

.to-be-animated {
  animation-name: vertical-slide;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: .5s;
}

This can also be written in shorthand.

.to-be-animated {
  animation: vertical-slide 2s ease-out .5s;
}

More animation customizations

By default, animations run once from beginning to end. To repeat an animation, use the animation-iteration-count property. The values can be an integer, to specify how many times the animation should iterate or the keyword, infinite, to repeat the animation indefinitely.

In the example below, the animation starts automatically.

See the Pen rOBgZZ by christinatruong (@christinatruong) on CodePen.

In this example, the animation has been applied to the hover state. Hover over the circle to initiate the animation.

See the Pen yYBGdM by christinatruong (@christinatruong) on CodePen.

For more details on animation, view the W3C specifications here.

As with any other technique, use the best tool for the job. While CSS3 is a great alternative to using JavaScript, be sure to check the browser support for each property, especially if your project requires support for older browsers. If the animation requires more control & complexities, JavaScript/jQuery might still be your best bet.

Happy animating!

Code