What is Animation?
Animation is the illusion of movement that is created by displaying a series of still images in rapid succession. When it comes to the world of computers, graphic software is used to create these illusional masterpieces.
If you are a techie, you should be familiar with the primary methods of creating animations on the web. The current trend has proven to be either CSS3 or JavaScript. The one you choose clearly depends on various requirements of the project that you are doing and its related effects.
With the ability create even the most basic animations, JS and CSS3 has their own pros and cons. Let’s check them out.
CSS3 Animations
Using CSS3 animations, developers are able to create animations that can replace animated images, flash animations as well as JavaScript animations in new and existing web pages. Basically what a CSS3 animation does is that it allows elements to gradually change from one style to another. As a developer you are able to change as many properties you want and as many times you want. Furthermore, you can even specify when the change will happen in percent, or use keywords ‘from’ and ‘to’ which represents the values 0% - 100%. 0% is the start of the animation while 100% is when the animation is fully complete.
Great CSS3 FREE Resources: Animate.css and Justin Aguilar CSS3 Animations
Here is a table that best describes the @keyframes rule as well as all the animation properties of CSS3.
@keyframes : This specifies the animation
animation : This sets all animation properties except the animation-fill-mode and the animation-play-state property
animation-direction: This property specifies whether or not the animation should play in reverse on alternate cycles
animation-delay: Specifies when the animation will start
animation-duration : The property specifies how many seconds or milliseconds an animation will take to complete one cycle
animation-fill-mode :Specifies what styles will apply for each element when the animation is finished or when it has a delay
animation-name: Provides you with the name of the @keyframes animation
animation-iteration-count: Gives the number of times an animation should be played
animation-timing-function: Specifies the speed curve of the animation
animation-play-state: Tells you if the animation is paused or running
With CSS3 animations, you can define the animation itself independently of the target element, and then use the animation-name property to choose the required animation. Did you know that CSS animations are still mostly vendor prefixed? -webkit- is used in Chrome, Safari, Safari Mobile, Opera as well as Android Browser. Firefox and Internet Explorer both ship without prefixes. There are many tools that will help you to create a prefixed version of the CSS you require while you can also write an unprefixed version in your source file.
Check out the Pros and Cons of CSS3
Advantages
- No more JavaScript or Flash files for showing animations, scaling and rotating images
- No more images are needed to round the border of buttons
READ MORE : ceffectz
