Here’s a sample code that I will explain:
<!DOCTYPE html>
<html>
<head>
<style>
button {
position:relative;
animation:myanim 3s infinite;
-webkit-animation:myanim 3s infinite; /* For Safari and Chrome */
}
@keyframes myanim {
0% { background:orange; left:0px; }
25% { background:orange; left:200px; }
50% { background:orange; left:400px; }
75% { background:green; left:200px; }
100% { background:green; left:0px; }
}
@-webkit-keyframes myanim {
0% { background:orange; left:0px; }
25% { background:orange; left:200px; }
50% { background:orange; left:400px; }
75% { background:green; left:200px; }
100% { background:green; left:0px; }
}
</style>
</head>
<body>
<button>
I am alive! :D
</button>
</body>
</html>
CSS3 Animations basically depend on two things:
- animation (or -webkit-animation for Chrome and Safari web browsers) is used in the main element properties for selecting an animation sequence.
- @keyframes (or @-webkit-keyframes for Chrome and Safari) is used to set up the entire animation sequence.
In animation property we set the name of the keyframes where the sequence is defined called myanim, give the total duration as 3 seconds (3s) and tell it to run infinite times.
In keyframes section we tell it to change the color and set the position of the button from left side on each step. The steps themselves are in percentages denoting a stage each in the animation sequence. If only 0% and 100% were used then we could alternatively write from and to in their place because they mean the same.
This is just a simple example that will display a button jumping left-right on the page forever.
good tutorial thank you
ReplyDelete