With some of the more advanced features of CSS3, you can animate objects on a whole new level. This video makes mention of the fact that only Safari and Chrome browsers currently support this kind of CSS transition. Although this was still true at the time Craig Pattenden made the tutorial, many updates have occurred since then and according to http:\/\/caniuse.com\/css-transitions Firefox, iOS, Opera, Opera Mobile and Android have been added to the list of supported browsers.<\/p>\n
By simply assigning a border radius to a box He does a really good job of breaking down in detail the CSS code for all of the positioning, so make sure you take a moment and look at that even though he spends a few minutes explaining the reasoning and mechanics of the orbit and rotation transitions being created. Transitions like this are incredibly slick and can change the way a page or website is perceived by the visitor.<\/p>\n Taking the time to then go deeper into this endeavor, Craig then tackles the position of the moon’s shadow and the rotation of the moon itself. The end result is a truly amazing feat, especially knowing that there was no JavaScript used in the making of this animation. CSS3 has most definitely raised the bar of design potential for the online experience. If you are interested in checking out another tutorial exploring some cool transition animations, this video on creating a sweet pop-out effect<\/a> is a good place to start.<\/p>\n<div><\/code>, we are able to change a box into a circle. In this example a moon is meant to orbit around the Earth and this requires a few divs to be created first. The Earth <div><\/code> is positioned relatively with the orbit path and the moon divs being positioned as absolutely. The moon then must be attached to the orbit path. Once all your CSS positions are set you are ready to move on. There is obviously a bit of code involved in all of this, but here is the basic structure of the divs.<\/p>\n<div id=\"earth\"><\/code>\r\n <div id=\"moonContainer\"><\/code>\r\n <div id=\"moon\"><\/code>\r\n <\/div><\/code>\r\n <\/div><\/code>\r\n<\/div><\/code><\/pre>\n