CSS 3 Animations 04-18-2013, 12:44 PM
#1
///\\\ Ain't this face too cool?
_|_
You'll probably often see animations on line. Most common types are *.gif images and flash animations. But now have been introduced also CSS animations.
Let's see an example first.
Here is an animation to change background color graduating.
The first part of the code is easy to understand, assuming you already know CSS.
Let's take a look at the second part.
(the above comment syntax is wrong - take the code above this one)
You should have now understood about the properties. There's also an handshort property for animation:
Now, let's try to make a spinning image using transform.
The above, is the spinning animation you can see here: http://www.w3schools.com/css3/css3_animations.asp .
After all, that's not an hard issue to comprehend.
Hope I've been useful.
Please, note that from and to can replace 0% and 100%.
Example code:
A tutorial inspired on the true story of my friend asitkumar.
_|_
You'll probably often see animations on line. Most common types are *.gif images and flash animations. But now have been introduced also CSS animations.
Let's see an example first.
Here is an animation to change background color graduating.
Code:
<html>
<body>
<style>
/* We're going to set "background" animation for
* all browsers but Chrome and Safari (@keyframes background)
* and for Chrome and Safari (@-webkit-keyframes background)
*/
@keyframes background background {
0% {background: #cd0000;}
15% {background: #dc0000;}
30% {background: red;}
100% {background: #0000cd;}
}
@-webkit-keyframes background {
0% {background: #cd0000;}
15% {background: #dc0000;}
30% {background: red;}
100% {background: #0000cd;}
}
@-moz-keyframes background {
0% {background: #cd0000;}
15% {background: #dc0000;}
30% {background: red;}
100% {background: #0000cd;}
}
@-o-keyframes background {
0% {background: #cd0000;}
15% {background: #dc0000;}
30% {background: red;}
100% {background: #0000cd;}
}
body {
/* Internet Explorer */
animation-name: background;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: background;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Mozilla Firefox */
-moz-animation-name: background;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Opera */
-o-animation-name: background;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 0s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
</style>
</body>
</html>The first part of the code is easy to understand, assuming you already know CSS.
Let's take a look at the second part.
PHP Code:
animation-name: background; // we're recalling our animation set above
animation-duration: 5s; // duration: you can make it slower by using a larger number or faster with a smaller one
animation-timing-function: linear; // after first loop goes on normally
animation-delay: 0s; // starts with no delay on page-load
animation-iteration-count: infinite; // endlessly looped, default is 1
animation-direction: alternate; // one cycle normal, one reversed
animation-play-state: running; // default is running, else can be paused
(the above comment syntax is wrong - take the code above this one)
You should have now understood about the properties. There's also an handshort property for animation:
Code:
animation: background 5s linear 0s infinite alternate;Now, let's try to make a spinning image using transform.
Code:
<html>
<style>
#animated_div
{
width:60px;
height:40px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
}
@keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}
@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}
@-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}
@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}
</style>
<body>
<div id="animated_div">
CSS3<br><span style="font-size:10px;">Animation</span>
</div>
</body>
</html>The above, is the spinning animation you can see here: http://www.w3schools.com/css3/css3_animations.asp .
After all, that's not an hard issue to comprehend.
Hope I've been useful.
Please, note that from and to can replace 0% and 100%.
Example code:
Code:
@-keyframes animated_div
{
from {transform: rotate(0deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
to {transform: rotate(-360deg);left:0px;}
}A tutorial inspired on the true story of my friend asitkumar.
My Bitcoin address: 1AtxVsSSG2Z8JfjNy9KNFDUN6haeKr7LiP
Give me money by visiting www.google.com here: http://coin-ads.com/6Ol83U
If you want a Bitcoin URL shortener/advertiser, please, use this referral: http://coin-ads.com/register.php?refid=noize
Give me money by visiting www.google.com here: http://coin-ads.com/6Ol83U
If you want a Bitcoin URL shortener/advertiser, please, use this referral: http://coin-ads.com/register.php?refid=noize
![[+]](https://sinister.li/images/modern/collapse_collapsed.png)
![[Image: OilyCostlyEwe.gif]](http://fat.gfycat.com/OilyCostlyEwe.gif)
everybody want to post tut for me! 
miling:
![[Image: Need-ASP.Net-Expert-with-C2.jpg]](http://axtongroup.com/asp.net-developer/wp-content/uploads/2013/02/Need-ASP.Net-Expert-with-C2.jpg)
