Basic Tutorial : CSS Animation With Example

Share:

Basic Tutorial : CSS Animation With Example. One of the features in CSS3 version is animasi. This feature can we change an appearance early style to a different style display. In this article I would like to invite you to get acquainted with the CSS animation. Immediately, following the tutorial
Basic Tutorial : CSS Animation With Example

Basic Tutorial : CSS Animation With Example

By using animation in CSS we can make a variety of basic animation that can replace other documents such as images, Flash or Javascript. To be able to use animations in CSS, we will to be acquainted with @keyframes rule. Because through CSS @keyframes, animation was created.
There are several advantages when we decided to make an animation via CSS

  • Easy to use for basic animation needs, and don’t need trouble with using javascript
  • Animation will be able to run well even though the system has lower specifications. CSS animation is also quite fast in the run so as not to burden the loading of your website.

CSS Basic Tutorial : CSS3 @keyframes
By using the @keyframe, an animation can be made. We need to define a name for the animation that we will create the next name will be called upon to run the animation that we created. In the @keyframe we need to also write the initial conditions until conditions finally animation. There are at least two ways to write the initial conditions and final conditions
Using from and to, for example :

@keyframes animation
{
     from {background: yellow;}
     to {background: orange;}
}

Using percentages, for example :

@keyframes coba
{
0%   {background: black;}
30%  {background: grey;}
60%  {background: purple;}
100% {background: pink;}
}

Currently almost all popular browsers already support CSS animation, except IE. However, there are several models of writing, @keyframe to be run on Firefox, Chrome, Safari and Opera. Here’s how to write

  1. Firefox must be prefixed with -moz to be @-moz-keyframes
  2. Safari and chromes must be prefixed with -webkit to be @-webkit-keyframes
  3. Opera must be prefixed with -o- to be @-o-keyframes

If written in accordance with the needs of each browser, the css3 animation code will be as below.

@keyframes animation
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes animation/* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes animation/* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes animation/* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
} 

Running CSS Animations
CSS animation should we call by way of putting it on the selector. Without this method, the animation will not run. Examples of writing as below :

div
{
width:600px;
height:150px;
background:blue;
animation:try 5s;
-moz-animation:animation 5s; /* Firefox */
-webkit-animation:animation5s; /* Safari and Chrome */
-o-animation:try 5s; /* Opera */
}

The above code will call the animation css “animation” with a duration of 5 seconds. Please combine all the above code in an HTML file by adding a div tag inside. More example is like this code :

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
div
{
width:600px;
height:150px;
background:grey;
animation:animation 5s;
-moz-animation:animation 5s; /* Firefox */
-webkit-animation:animation5s; /* Safari and Chrome */
-o-animation:animation 5s; /* Opera */
}

@keyframes animation
{
from {background:blue;}
to {background:green;}
}

@-moz-keyframes animation/* Firefox */
{
from {background:blue;}
to {background:green;}
}

@-webkit-keyframes animation/* Safari and Chrome */
{
from {background:blue;}
to {background:green;}
}

@-o-keyframes animation/* Opera */
{
from {background:blue;}
to {background:green;}
}
</style>
</head>
<body>

<p>Please refresh this page again to see the animation and color change.</p>

<div></div>

</body>
</html>

Creating animation using css will not be difficult because we already know the css animation creation. Good luck ..
Thanks for reading Basic Tutorial : CSS Animation With Example

[Tutorial.World.Edu]

3 thoughts on “Basic Tutorial : CSS Animation With Example

Leave a Reply

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