CSS3

Transitions vs Animations

CSS3 animations are more complex transitions.

Both CSS3 animation and CSS3 transition can be used to transition an element in a webpage. They can be used to transition some CSS properties within a given period of time. They have many similarities. They do have a few differences as well.

Transition is used for a single state change on some trigger (like :hover). It has a beginning and an end state.
Where a transition only goes from A to B, an animation can go from A, B, C to D or any number of stages as needed. Animations, don't require any explicit triggering. Once you define the animation, it will start playing automatically. We can have animations that repeat, or alternate, or go through multiple stages.

Transitions are generally easier to create and manage. There's a significant advantage to the transition approach, in that the hover effect gets a second, "out" transition for free.

To summarize: transitions are used to create a smooth transition from one state to another, and animations for more complex series of movements.

See for example Walking Cat by Eva and also this nice demo which shows using of 3D transforms, and animation by Donovan Hutchinson. Code explanation you can find here. More examples from Donovan Hutchinson here.

Animation Keyframes

CSS animation enables to create animations without JavaScript by using a set of keyframes. Keyframes hold what styles the element will have at certain times.

The keyframes block defined below will fade out an element during 10 seconds continiously.

Look at me
I am .fade class

@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade {
    animation: fade 10s ease-in-out 2s;
    animation-iteration-count: infinite;
}

Additional steps, between 'from' and 'to', can be inserted.

• Animation: How to animate – duration, speed, etc.
• Keyframes: The properties to animate.