Surely you've seen impressive animations made with CSS3. Perhaps the most colorful ones used three-dimensional effects and probably when you have visualized the code needed to trigger those animations you are surprised that it is so brief and simple in most cases.
Do you want to learn what they are and how to carry them out?
Then very attentive to this post.
What are animations in css3?
The style sheets (CSS) for those who do not know for sure what it is, is a file that is responsible for giving colors, sizes and structure to our web pages. This new evolution of animations with css3 allows us to give movement to any element in our site, ie we can do, for example, that a layer (div), a text or a table have movement allowing to see at the beginning of our web a text Appearing, some element rotating or sliding with the mouse over a layer that is rotated or resized.
Since flash is not compatible with mobile devices, css3 has become much more important, since, as we said in previous post, currently more users access the Internet through their mobile devices , so have animations CSS allows you to continue to enjoy movement and animations on our small screens without the need to load large files for it, (as already happened with the use of flash).
Since flash is not compatible with mobile devices, css3 has become much more important, since, as we said in previous post, currently more users access the Internet through their mobile devices , so have animations CSS allows you to continue to enjoy movement and animations on our small screens without the need to load large files for it, (as already happened with the use of flash).
The animations are achieved thanks to the function "animation" and its sub-properties. These last ones give us the possibility to configure the duration, the rhythm and other characteristics. The most outstanding are the following:
Animation-delay
It is the delay time between the moment the element is loaded and the beginning of the animation sequence.
Animation-direction
It tells us if the animation is forced to go back to the start frame when the sequence is finished, or if it should start from the beginning when it reaches the end.
Animation-iteration-count
The number of iterations (repetitions) of our animation.
Animation-name
Specifies the name of the @keyframes rule.
Animation-duration
How long it takes (duration) our animation.
Animation-fill-mode
What will be the values of our properties when the animation is finished.
Animation-timing-function
It indicates the rhythm of the animation. That is, how the frames of the animation are displayed, establishing acceleration curves.
Animation-play-state
Pause or resume our animation.
Once you have commented on the different functions of animation it is time to talk about Keyframes. When we specify a CSS code inside the keyframe property, the animation will begin to change gradually; From an initial CSS style (0%) to the style with which you want to finish (100%). An example of how a Keyframe would look in code:
We just created a behavior for a keyframe and called it spinning. The animation will move and rotate relative to the container we now determine:
With -webkit-perspective we define the movement of the 3D element on the Z axis (creating the depth effect), which can not be defined before with the simple CSS2 (since it is only 2D).
Now we integrate the keyframe with the container, besides adding the duration time of the animation: 
CSS animations compared to JavaScript animations
Originally Flash paved the way for us to characterize with more than text or images the web pages. It allowed developers to include animations and other rich effects, guiding us towards a more colorful and varied user experience. However, Flash was plagued with flaws, such as security issues, long loading times on mediocre networks ... so came the JavaScript libraries like jQuery, Prototype and MooTools, which shifted many of the Flash problems running natively In the browser, besides making it easier for the average developer to use Javascript when creating effects and animations.
It has been a few years and we have CSS3 skills to create animations, which offer additional advantages, such as the potential increase in speed (because they are rendered directly by the browser).
But what is really the best solution for us when it comes to using animations?
Unfortunately, browser support is not so good for CSS3 animations, since IE versions below 10 do not support this property, and although the vast majority of other great browsers do, and The animation specification is already stable in them, most have not yet eliminated the requirements of particular prefixes of each browser, making that to support the property have to include them, (these being -webkit-, -moz-, -ms- and -o).
In performance, however, it clearly gains CSS3 at a great distance. The gigantic difference is that the browser's CSS processor is written in C ++, causing the native code to run very fast, whereas jQuery (JavaScript) is an interpreted language and the browser can not predict its behavior in advance, trying to guess What event will occur later and therefore prolonging the wait.
Although the above results indicate that you have to use CSS3 animations, you should take into account the advantages and disadvantages we discussed earlier in the post. You need to prioritize that even a significant number of people use Internet Explorer 7 and 8, so you should use jQuery if it is absolutely necessary that your animations functions just as well as in all older browsers.
It has been a few years and we have CSS3 skills to create animations, which offer additional advantages, such as the potential increase in speed (because they are rendered directly by the browser).
But what is really the best solution for us when it comes to using animations?
Unfortunately, browser support is not so good for CSS3 animations, since IE versions below 10 do not support this property, and although the vast majority of other great browsers do, and The animation specification is already stable in them, most have not yet eliminated the requirements of particular prefixes of each browser, making that to support the property have to include them, (these being -webkit-, -moz-, -ms- and -o).
In performance, however, it clearly gains CSS3 at a great distance. The gigantic difference is that the browser's CSS processor is written in C ++, causing the native code to run very fast, whereas jQuery (JavaScript) is an interpreted language and the browser can not predict its behavior in advance, trying to guess What event will occur later and therefore prolonging the wait.
Although the above results indicate that you have to use CSS3 animations, you should take into account the advantages and disadvantages we discussed earlier in the post. You need to prioritize that even a significant number of people use Internet Explorer 7 and 8, so you should use jQuery if it is absolutely necessary that your animations functions just as well as in all older browsers.
Which browsers read the animations in css3 and html5?
The evolution of the web environment leads to increasingly rich and more interactive applications, blurring the barrier between web applications and desktop applications, local data and the cloud, etc ...
Despite the fame and weight that is receiving in the media HTML5 standard, still in draft, are not less important style sheets. Being consistent, style sheets are what make a web full of text like a book, a composition of shapes, colors, sections and, with CSS3, interaction as well.
It is sad to note that, since CSS3 was around 2005, even browsers do not support some of their functions as much as would be desirable.
As usual, Webkit goes to the top, Firefox follows a not too great distance, Opera approximately where Firefox, and Internet Explorer , even in version 9, disappoints as always.
Older browsers will not read these new codes, but nowadays most users will be able to view our animations without any problem, because for security operating systems and browsers are usually updated every certain period of time to avoid problems. Below we present this comparative table where it is clearly seen from which version they are compatible.
Despite the fame and weight that is receiving in the media HTML5 standard, still in draft, are not less important style sheets. Being consistent, style sheets are what make a web full of text like a book, a composition of shapes, colors, sections and, with CSS3, interaction as well.
It is sad to note that, since CSS3 was around 2005, even browsers do not support some of their functions as much as would be desirable.
As usual, Webkit goes to the top, Firefox follows a not too great distance, Opera approximately where Firefox, and Internet Explorer , even in version 9, disappoints as always.
Older browsers will not read these new codes, but nowadays most users will be able to view our animations without any problem, because for security operating systems and browsers are usually updated every certain period of time to avoid problems. Below we present this comparative table where it is clearly seen from which version they are compatible.
To conclude this post I leave you with an example of 3D animation, which I hope will help. From here, you can experiment to animate different parameters like opacity, size, position, color and size of the edge or even to mix several elements.
I encourage you to share your experiments in the comments, and if you have any doubts, we will try to help you solve them.
I encourage you to share your experiments in the comments, and if you have any doubts, we will try to help you solve them.
great
ReplyDeletethanks for the tips and information..i really appreciate it.. kissanime
ReplyDeleteExcellent content ,Thanks for sharing this .,
ReplyDeleteMust have Skills for online teachers
Free teaching tools