Step by Step CSS3 Animation for beginners

css3animation

CSS3 has been introducted recently with the aim to phase out flash. Older browsers do not support CSS3 so make sure to have the latest version of whatever browser you prefer using. I will be using Chrome for this tutorial so we will need the google webkit. Even if you will not use Chrome, it is still suggested that you keep the webkit to make sure that users visiting your site with Chrome can view the CSS3 animation properly.

The most basic and important rule we need to know is called the @keyframes where we specify the animation we would like to have from beginning to end.

When using the @keyframes we can specify at what time we want the animation to take place. We can use from{} and to {} or percentage values such as 0%{}, 50%{}, 100%{} etc.

Lets create some simple examples…. 

Example 1:

Lets declare our first animation in a stylesheet to create a simple search textbox animation:

Step 1: Declare Keyframes for both IE and Chrome/Safari

/* IE 10 */
@keyframes myFirstAnimation
{
from { width: 20px; }
to { width: 150px; }
}

/* Safari and Chrome */
@-webkit-keyframes myFirstAnimation
{
from { width: 20px; }
to { width: 150px; }
}

Step 2: Create Styling for textbox and set animation myFirstAnimation

#searchAnimation
{
border: 1px solid #cccccc;
padding: 2px;
height: 30px;
max-width: 150px;
animation: myFirstAnimation 5s; /* IE 10 */
-webkit-animation: myFirstAnimation 5s; /* Safari and Chrome */
}

Step 3: Set properties for the search button (simple css, not using css3)

#search, #search a, #search:link
{
font-weight: 600;
color: #ffffff;
border: 1px solid #cccccc;
background: #cccccc;
padding: 2px;
height: 30px;
width: 30px;
cursor: pointer;
}

#search:hover
{
color: #333333;
}

Step 4: Add HTML elements using IDs used in styling

<form>
<input type=”text” id=”searchAnimation” />
<input type=”submit” id=”search” value=”?” />
</form>

Example 2:

We will make a simple div that moves is a rectangular area.

Step 1: Declare the @Keyframes

/* IE 10 */
@keyframes mySecondAnimation
{
0% { top: 0; left: 0; }
25% { top: 0; left: 500; }
50% { top: 500; left: 500; }
75% { top: 500; left: 0; }
100% { top: 0; left: 0; }
}

/* Safari and Chrome */
@-webkit-keyframes mySecondAnimation
{
0% { top: 0; left: 0; }
25% { top: 0; left: 200; }
50% { top: 200; left: 200; }
75% { top: 200; left: 0; }
100% { top: 0; left: 0; }
}

Step 2: Declare CSS of divider and set mySecondAnimation

#movingAnimation
{
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation: mySecondAnimation 5s; /* IE 10 */
-webkit-animation: mySecondAnimation 5s; /* Safari and Chrome: */
}

Explained:

animation: AnimationName AnimationDurationInSeconds;

animation can also be split using animation-name and animation-duration

Step 3: Add HTML div element using ID used in styling

<div id=”movingAnimation”> </div>

Step 4: Optional Animation setting you can add to #movingAnimation in Step 2

Delays animation start time in seconds (1s , 2s, …. ):

animation-delay:2s; /* IE 10 */
-webkit-animation-delay:2s; /* Safari and Chrome: */

Animation Loop Count (1, 2, 3 … infinite):

animation-iteration-count:infinite;  /* IE 10 */
-webkit-animation-iteration-count:infinite; /* Safari and Chrome: */

Animation Direction for Loops (alernating – first clock wise, than anti-clock wise, and so on):

animation-direction:alternate;  /* IE 10 */
-webkit-animation-direction:alternate; /* Safari and Chrome: */

How animation progresses during the animation duration (easy, fade, linear, bounce, etc … default: ease)

animation-timing-function:linear;  /* IE 10 */
-webkit-animation-timing-function:linear; /* Safari and Chrome: */

Play / Pause (running for play, pause for pause… default: running)

animation-play-state:running; /* IE 10 */
-webkit-animation-play-state:running; /* Safari and Chrome: */

 

View Sample Preview of the above simple CSS3 animation

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s