Friday, 24 October 2014

CSS3 @keyframe Animations

CSS3 Animation/Keyframes

@keyframes allow us to make amazing animations without using Flash, javascript or animated images.



There's few important steps:


1. Choose the element you want to animate and give it class or id.


Example:


<div class="anime"></div>




2. Make sure that your element appear in the page by adding some styles.

Example:


.anime {

    width: 300px;
    height: 200px;
    background-color: #ff0033;
}



3. There's few properties that you can use.

animation-name  
You always have to add this property if you want to make animation. This is the name of your animation. It can be everything.

Possible values :



  • Animation name


animation-delay 
Pass only 1 value, for example if it's 3s(seconds), the animation will start after 3 sec when page loads.

Possible values



  • Seconds   //   animation-delay: 2s; 


animation-direction

Specifies whether or not the animation should play in reverse on alternate cycles.

Possible values :

normal | Default value.

reverse | The animation should play in reverse direction


alternate | The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)


alternate-reverse | The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)



animation-duration

Defines how many seconds it will take the animation to complete one cycle.
Possible values


  • Seconds


animation-iteration-count

Defines the number of times an animation should be played
Possible values :


  • Number(1,2,3,4 etc.)
  • Infinite


animation-play-state

Specifies whether the animation is running or paused.

Possible values



  • paused
  • running


animation-timing-function

The animation-timing-function specifies the speed curve of the animation.

Possible values :



  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out


animation

This is shorthand property for setting all animation properties in one,
except the animation-play-state and the animation-fill-mode property.

Syntax :

animation: name duration timing-function delay iteration-count direction play-state;

Example:

-webkit-animation: spinner 5s ease 0s infinite alternate running;


Example of all properties:


.anime {

    -webkit-animation-name: spinner;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

Note:

Always use them with vendor prefixes:


  • -webkit- | for google chrome and safari
  • -moz- | for mozilla
  • -ms- | for Internet Explorer
  • -o- | for Opera



4. Next step is the real animation. Now you will going to use @keyframes. Always use vendor prefixes.

Syntax:

@-prefix-keyframes animationName {

    
}

Example:


@-webkit-keyframes spinner {


}


5. We can control the animation all the time. To do that you need to use percents.


Here's what will going to happen:

at 10% of the animation the background will change, at 30% the width, at 60 the height and at 100% it will spin the element 360deg.

SYNTAX:


@-webkit-keyframes spinner {

 10% {
background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}
}

Full example:


<html>

<head>
<title>My first Animation</title>
<style>

.anime {

    width: 300px;
    height: 200px;
    background-color: #ff0033;
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

@-webkit-keyframes spinner {


    10% {

background-color: #fff;
}
30% {
width: 400px;
}
60% {
height: 300px;
}
100% {
-webkit-transform: rotate(360deg);
}

}


</style>

</head>
<body>
<div class="anime"></div>
</body
</html>

Note: 

Experiment with the code all the time for better and amazing results. Learn with #EASILYLEARNHTML Team all the time.

CLICK FOR LIVE DEMO