About
One of my favorite parts of web development is implementing animations. The go to is usually JavaScript for animations, but I've often found CSS to be the far better choice. CSS based animations are often simpler to implement, run well even under load, and utilizes the browser's graphics engine to optimize the animation for that particular device.
I've created a couple of examples to demonstrate the capabilities of CSS based animations. None of the examples below use any JavaScript and rely 100% on CSS for animation. These examples are cross-browser compatible, work well on mobile devices, and render in high resolution.
CSS 3D SlideShow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat magna et turpis vestibulum placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat magna et turpis vestibulum placerat.
I wanted to challenge myself with this example, and build a fully functional slideshow entirely in CSS. The trick to this example is the use of the checked attribute to determine the orientation of the cube. For the rotation animation, each face of the cube is a div plane, and I used 3D transormations for each plane to give the illusion of a cube rotating.
CSS 60 Second Clock
In this example, I used CSS Keyframes to handle the animation of the clock hand. The face of the stopwatch is just an image, but the clock hand itself is CGI and made entirely in CSS. One interesting use case for keyframes is their potential use in sprite animations. This is because keyframes give the ability to specify background positions or images at specific time intervals.
Loading Animation
In this example, we convert <p>h; tags into individual spheres using a gradient. I then have them rotate around a single point and slowly reduce the size of each sphere.