CSS animation : CSS animation
What are CSS Animations?
The CSS animation is user friendly way of creating animation for changing an element gradually change from one style to another. Just by changing some simple codes in HTML program.
People may question that why should we use this CSS animation when we have some advance languages like Java script. So the answer it, with the latest technologies and latest version of browser it is now possible to make animation in HTML also .
It’s some properties are:
1) The user can eaily modify as many CSS properties they want according to their needs, as many times times want to change it.
2)The important aspect of CSS animation is key frame, the user must first specify the desired keyframes for the animation to take place .
3) The aspect of CSS animation is it’s Keyframes hold the information of styles that element will have at certain times.
In CSS animations “CSS ” stands for “Cascading Style Sheets” , this is an prominent module designed such that it allows the animation of HTML document by simply using key frames elements of CSS.
About the origin of CSS:
From many decades , all the animation were done with the help of pseudo-class “:hover” the basic uses of, extensions of CSS were practically negligible at that time of animation .
And it continued until the late 2000s decade as most of the people don’t know how to use them properly in their stack of codes to get desired animation..
But the scenario changed in beginning of 2007, when WebKit announced its step to include CSS animation, transitions, and transforms as upcoming features of WebKit.
With correspondence to it , it also announed the implementation of both implicit and explicit animation done through CSS in February 2009.
Later the CSS animation was also started to put forth as a prominent feature of CSS3, it is the ongoing draft specification which is been managed by the World Wide Web Consortium (W3C).
Presnt uses and benefits.
The CSS Animations is been started to be used by a lot of people nower days for Cascading Style Sheets module..
It allows it’s users to draw and code over any objects and it will show animation working visible.. at present, the CSS animation is adopted by all major search engines. Including google .
As the CSS animation was started to be used widely by WebKit many other browser also included it to their system too. Till June 2011, many well known browsers like Firefox 5 included it as their part by allowing CSS animations support.
The CSS animation is now also available as a advance module in the nightly builds of WebKit as well as Google Chrome, Safari 4 and 5 and Safari for iOS (iPhone, iPod Touch, iPad),
it is also used in latest Android versions 2.x and 3.x, till June 1, 2011. It was also used in Internet Explorer 10+ and Microsoft Edge browser, the BlackBerry OS 6 web browser, with the -webkit- prefix.It is also used in iTunes 9 to support iTunes LP files.
Controversy with Java.
To stop the intense progress of CSS animation ,all others started claimed it to be a move by Apple Inc.,
which was been recognized as a main sponsor of the WebKit project at that time, to downfa ans side step the inclusion of Adobe Flash ( the new software designed for animation and graphic designing) on the company’s iOS line of mobile devices which were using Safari as a first choice.
although Cascading Style Sheets is a much more easy to use programming language, stil many programmers find it difficult to make animations in it. And for the solution of this problem, several individuals creators and
websites have developed and created an advance open source CSS button animations with code for making it easy to apply animation by using those codes for coping for thier documents..
Even With all such kind of controversies , the CSS animation is still leading and predominating all other animation softwares. And now it can be easily found in any browser .
CSS Animation Properties:
The following table all the rules of specific @keyframes used in the CSS animation are given with their properties:
1) @keyframes This is used on the priority basis in any CSS animation used for
Specifying the purpose of this codes.
2) animation it is an property designed to manage all other properties in a a appropriate order and way
3 ) animation-delay this property is used to classify the time of delay before the
. Start of an animation
4) animation-direction this property is used to Specifies the movement of animation that it should move in forward direction or backward direction.or in alternate cycles
5) animation-duration this property is used to Specifies the time interval about how long time taken by the animation to complete one cycle
6)animation-fill-mode this is used to specify the style of the element at the initial , final or paused state when animation is not moving.
7) animation-iteration-count it is used to define the number of times an animation should be played in complete cycle.
8 ) animation-name as suggested by its name..It Specifies the name of the @keyframes animation
9 ) animation-play-state it check thawhether the animation is running or in paused condition.
10) animation-timing-function it is used to Specifies the speed curve of the animation
The work of Animating most properties is to easy but it also depends on the performance of the operating system and browser. The most suitable platform to run an CSS Animation is chrome as it provides as most fast processing of data and it’s runs all CSS Animation at the best and
opera is the second most preferred platform to Run CSS animation codes ,
it is little bit slower process in operaas compared to chrome but still much suitable for the users but all browsers need specific codes according to browser to be able to run on them so we should proceed with caution before animating with any kind property in browsers mode .. However, there are certain combinations that can be animated safely:
1) transform: translate()
2) transform: scale()
3 ) transform: rotate()
4 ) opacity its determines the speed of visibility of the object.
MDN serves a list of all the CSS properties which can be animated. Still some properties are not possible to me animated Like background
So now you everything about CSS Animation, if still you have some queries let us know in comment section.