Exercises on CSS3 animations carried out in a live event broadcast on .com with different demonstrations of the possibilities of this HTML5 technique.
On June 6th we broadcast a talk for .com where I was talking about CSS3 animations. An interesting introduction to the possibilities that exist right now for people, like me, who have left the world of Flash to join the standards based on HTML5.
During that event that I shared with other people from the .com team, I made various examples that I now want to publish in this article. The examples are really not complicated at all, but rather serve to illustrate the possibilities of CSS3 animations to people who have never worked with this relatively new utility.
Note: At the end of this article you can find the recording of the CSS3 animations quote, where many interesting explanations are offered that will complement the codes that I am sharing with you.
Basic example: my first CSS animation
In this example we make our first animation. It is very simple, but it already demonstrates well the possibilities that we will have as soon as we master this aspect of CSS3.
We have a “div” layer that has a background image. That layer moves around the screen with three “Keyframes”. The key frames serve to express the different states of the animation and correspond to the same concept that other Flash developers or ex-flashers like me may have learned.
The example code is as follows:
Note: Note that we are using the “-webkit” prefix so it will only work in Chrome or Safari.
The link to see this example running is as follows:
Example 2: hover effects and different borders
In this second example we already do something a bit more complex, and we load other browser prefixes than Webkit, so that the animation is compatible with more browsers.
As you can see, we have several layers, with different classes. They all have animation effects applied to the links (label A), but with classes we get those effects to vary from layer to layer.
We can see this second example in the following link:
This is all, I hope it has been useful to anyone who wants to learn this facet of HTML5. Remember that in .com there are many other examples and explanations of CSS Animations in the .
Facebook Comments
Disqus