Guide Using CSS3 Animation

Guide Using CSS3 Animation

Animation is cool feature of CSS3. Animation is an easiest way to spice up your next project. In short, it lets you change CSS property over specific time duration. It consist of two main components, a style and a set of keyframes that indicate the start and end states of animation’s style.

In this article, i’m gonna introduce you to CSS3 animation, with syntax and example.

Setting up the animation

To create a CSS animation, style the element that you want to animate with the animation property. This will lets you configure the timing and duration of the animation, as well as other details of how the animation sequence should progress, and this can be done using @keyframes. You can declare CSS animation in two ways,

1. Calling keyframes animation with separate properties

element {
     animation-name: loader;
     animation-duration: 6s;
     animation-timing-function: ease-out;
     animation-delay: 3s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-fill-mode: forwards;
     animation-play-state: running;
}
2. Shorthand version of Animation

element {
     animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;
}
animation-nameGive appropriate name of the keyframe you want to bind to the selector
animation-durationSpecifies the length of an animation that takes to finish. Default value is 0, meaning there will be no animation. For example, 6s or 6ms
animation-timing-functionYou can use following functions:ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)cubic-bezier.com: A better tool for cubic-bezier() easing
animation-delayHere you can specify delay before the animation will start. For example, 3s or 3ms
animation-iteration-countSpecifies how many times an animation should be played. For example, 10 will play animation ten time or you can use infinite keyword to play animation infinite time.
animation-directionIt defines whether or not the animation should play in reverse on alternate cycles.Syntaxanimation-direction: normal | reverse | alternate | alternate-reverse;
animation-fill-modeSpecifies what styles will apply for the element when the animation is not playing means that when animation is finished or when it has a delay.Syntaxanimation-fill-mode: forwards | backwards | both | none;
animation-play-stateSpecifies whether the animation is running or paused.Syntaxanimation-play-state: paused | running;

Setting up animation sequence using keyframes

After configuring the animation’s timing, you need to define the appearance of the animation. This can be done by establishing set of keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

Method – 1: @keyframes declaration

@keyframes ANIMATION-NAME {
     from {
          /* Some Style */
     }
     to {
          /* Some Other Style */
     }
}
Method – 2: @keyframes declaration

@keyframes ANIMATION-NAME {
     0% {
          /* Some Style */
     }
     25% {
          /* Some Style */
     }
     50% {
          /* Some Style */
     }
     100% {
          /* Some Style */
     }
}

Implementing Steps()

Using steps(), you can controls how many keyframes will render in the animation timeframe. For example, if you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The most popular use for step easing is sprite animation. See, the demo about sprite animation with steps easing.

Multiple Animation

Multiple animations can be specified comma separated on a selector. Here is one another demo for multiple CSS animations.

More Resources

Leave a Reply

Your email address will not be published. Required fields are marked *

CSS measuring Units
CSS Web Design

Measurement Units in CSS

CSS offers a number of different units for expressing length. It includes absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You required these values while specifying various measurements in your stylesheet. It supports various measurement units which are listed below: Using em This measurement […]

Read More
WordPress Loop
CSS

WordPress Loop

The WordPress loop is a list of all or limited number of post and page entries in database. It is the main part of each WordPress theme and core of every WordPress powered site. It cycles through posts that allow us to display them in any manner we want. Before we start, let’s see how […]

Read More
Fonts
CSS

11 Great and Modern Fonts with Personality

This font collection is created by Antonio Rodrigues who is Brazil-born graphic designer and illustration. His work includes projects in typography, lettering, crafts, branding and sculpture. 1. Berlin Berlin is a group of display fonts inspired by the classic geometric typefaces from early last century. It features (so far) four versions, each one in three weights: regular, […]

Read More