This is webkit based animation. please open this page in safari/chrome browsers
After I finished my previous Article “How to make simple Jquery dropdown”, I decided to make a new article to talk about webkit css. There is number of things are there to talk about webkit css. But I selected the animation keyframes which is make really interesting.
The webkit browser are leads in the css3 property supports. You may wonder the reason behind, yes! you are right, because of apple’s support and developments. They use the webkit css in numerous ways like ipad, ipod, ipone.
Actually webkit css is not supported by all browsers. Upto Ie9 reaches, we can’t think about ie browser. But in the market we have the Mozilla browsers. But apart from webkit browsers (safari,chrome), if you compare the browser support on the css3, with Mozilla based browsers(firefox,opera) it not supported as like webkit browsers.
But we no need to wait to learn. It’s making us to think about the webkit browser. In this article let me explain about the webkit key frame animation. It is very interesting and it work like adobe flash animation.
Once all browsers are starting support this kind of animations, I am sure there is no need to think about flash animations. It is very easy and customizable, easily editable and it is within our hand. Good thing right!
Basically an animation needs to have a name, so it would be fine to call or select from. And there is also a best animation character is it should have a facility to apply values, the delay time to start. Even though an animation start there is another important question is “In which direction the animation has to proceed” clock wise or anti clock wise? Or alternate way.. Set any one of this. The basic requirement of animation is end.
But what about some special character to help animators, yes it is there. Even we can set the animation count to how long that has to play. Just a time or keep on to play? Else a count do you like? You can. As well there is other options are there like direction, fill mode, play state, and timing function.
What I am going to cover here:
- -webkit-animation
- -webkit-animation-delay
- -webkit-animation-direction
- -webkit-animation-duration
- -webkit-animation-fill-mode
- -webkit-animation-iteration-count
- -webkit-animation-name
- -webkit-animation-play-state
- -webkit-animation-timing-function
All above properties and what are they do. In the basic level of using jQuery frame work and core Javascript how to control the animation made by webkit.
-webkit-animation
This property is combining all animation properties. We say this is short form of animation. Like in the normal way we use to give margin like
Instead: margin-top, margin-right, margin-bottom, margin-leftWe use: margin: top right bottom left
As like there is no.of properties for animation, we can shorten in to like this:
Instead: -webkit-name,-webkit-animation-duration, -webkit-animation-direction ect,
We use : -webkit-animation: name duration timing_function delay iteration_count direction
-webkit-animation: rotate 2s liner 5s infinite normal;
Let us apply this property in to the “square” div element. As well we have to add the animation to keyframes to call. Now the key frames need the name to call the animation. Below is the example to do call the animation by keyframes.
#squre{ Background:orange; Height:100px; Width:100px; -webkit-animation: squre 2s liner 0 infinite normal; } @-webkit-keyframes squre{ from{ -webkit-transform:rotate(0deg) /*start point*/ }to{ -webkit-transform:rotate(360deg) /*end point } }
Output:
Now let us see each property alone :
-webkit-animation-name: define the keyframes to call the animation. And this is the name of the animation for any use.
-webkit-animation-name: rotate; /*name of the animation to call (rotate)*/
Output after name added:
-webkit-animation-duration: define time period to your animation, single time (exp: 0deg to 360deg single rotation will take 3s if you declare). within this point our animation will start to work!
-webkit-animation-duration: 2s;
Output after duration added:
-webkit-animation-iteration-count: Difines the animation rotation count. It has the option as infinite to play continuously or num.of time what you declare here. (Ex: if you declare 5, it will play 5 time and stop)
-webkit-animation-iteration-count: infinite;
Output after iteration count added:
-webkit-animation-direction: Defines the direction of the animation to play single or alternate sides. In case we like to play our animation in reverse order we can declare the negative value in keyframes. (exp: instead 360deg we can declare -360deg)
-webkit-animation-direction: alternate;
Output after direction added :
-webkit-animation-play-state: We can declare the value to our animation neutrality. If we like to start our animation without any delay then we can set the value as 0. In case we can also set time delays like 10s or what we like. We can’t give directly minutes and hours. We have to convert all into seconds.
It is used to set our animation as play state or paused in page loading. People used to set pause state in case of dynamic interactions. That will be better to play, once the user clicks the play button.
-webkit-animation-play-state: running;
-webkit-animation-timing-function : Timing function is nothing but to set the effect to the animation. Moreover we may use the liner functionality. There are also effects available as, “ease”, “ease-in”, “ease-out” and “ease-in-out”.
-webkit-animation-timing-function: linear;
Output after timing function added(i used liner so there is no chage) :
This value always be as none. We can use the value as backwards, forwards, both. It provides fine-tuned control over your keyframe animations. We can set the state of the animation on end of or star of procees.
-webkit-animation-fill-mode: none;
Output after fill mode applied (right now there is no, color or start and end point change, so you will not see any change)
This are all sets our key frame to work good. By the way let me show you very simple jquery controled animation. Let you enable webkit animation by dynamically. i give you the sample script by jquery and javascript.
Animate by jquery, just click on the squre box!
jQuery(document).ready(function() {
jQuery('#webkit-jquery').click(function(){
jQuery(this).css("-webkit-animation", "square 3s linear infinite");
})
});
Animate by core Javascript, just click on the squre box!
window.onload = function(){
function applaystyle(){
var mysqure = document.getElementById('webkit-js');
mysqure.onclick = function() {
this.style.webkitAnimation = "square 3.6s linear infinite";
}
}
applaystyle();
}
Please comment me, if you feel anything wrong!. Thanks
