Create smooth animations with CSS3 animations

CSS3 Animations Module┬áthat solves all these problems. In this new specification, the animation are keyframe-based which allows more complicated animations to be done easily and the syntax is pretty easy. First, let’s understand the syntax. You need to define a set of keyframes with the @keyframes rule first. Here’s an example:

In this example, it defines a set of keyframes called animation. It starts from the original position and moves to left by 100px. You can also add more than 2 keyframes by using percentages to indicate the position of the keyframe. Here’s an example:

DEMO In this example, the animation will first moves from its original position to it right by 36px then at the 60% of the whole animation it starts to move from the right to the left by 100px. This creates a bouncing animation. You can also animate more than one property at a time to create even more complex animations. After we have created the keyframes, we need to add the keyframes to the element that we want to animate by using the animation CSS3 property. Here’s the syntax:

Where <keyframe_name> is the name of the keyframe you want to add, <duration> is the length of the animation in seconds, <timing_function> is a string indicates the progress of the animation and <iteration> is the times of repeated animations. Here’s an example:

This will play an animation with a set of keyframes called animation in 2 seconds once. You can also make more changes to make an animation to look more natural by adding a timing function of ease

Published by

Licson Lee

Hi! I’m Licson. I’m a student who loves programming.

Leave a Reply

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