@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
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
No comments:
Post a Comment