+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: CSS 3 Animations (/Thread-CSS-3-Animations)
Pages:
1
2
CSS 3 Animations - noize - 04-18-2013
///\\\ 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.
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.
CSS 3 Animations - noize - 04-18-2013
///\\\ 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.
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.
RE: CSS 3 Animations - Psycho_Coder - 04-18-2013
That's a simple and cool tutorial
RE: CSS 3 Animations - Psycho_Coder - 04-18-2013
That's a simple and cool tutorial
RE: CSS 3 Animations - TheDeceptionist - 04-18-2013
Thats a neat clean awesome tutorial.
I was planning on making this tutorial [ as i saw asitkumar ask me ].
But anyways thanks.
RE: CSS 3 Animations - TheDeceptionist - 04-18-2013
Thats a neat clean awesome tutorial.
I was planning on making this tutorial [ as i saw asitkumar ask me ].
But anyways thanks.
RE: CSS 3 Animations - noize - 04-18-2013
Thank you, guys.
RE: CSS 3 Animations - noize - 04-18-2013
Thank you, guys.
RE: CSS 3 Animations - asitkumar - 04-19-2013
oh wow! nice tut. something to get me busy with
feel so special
everybody want to post tut for me! jokes apart thanks @noize for this tut!
miling:
RE: CSS 3 Animations - asitkumar - 04-19-2013
oh wow! nice tut. something to get me busy with
feel so special
everybody want to post tut for me! jokes apart thanks @noize for this tut!
miling: