Fun and inspiring CSS examples and animation effects

Get inspired by the elegant use of CSS, CSS3, and jQuery or JavaScript in these examples. Also, learn about a fantastic new resource for brushing up on your CSS vocabulary.


Developers are pushing the barriers of CSS and CSS3 in particular and are including the use of many animation effects, some of which require jQuery and JavaScript. I highlight examples that I hope you'll find fun and inspiring; the examples include a CSS Solar System demonstration, several CSS animation effects for a view-slider for mobile apps, 3D transforms, and a cake built with CSS.

CSS Vocabulary

Before I get to the demos, take a look at the nifty resource called CSS Vocabulary by Ville Vanninen. He gives you live examples of block, selector, combinator, declaration, and many others, and you can view code examples and CSS vocab definitions side-by-side. A screen capture of the CSS Vocabulary page with the At-rule selected is displayed in Figure A.

Figure A


CSS Solar System demonstration

The CSS Solar System demonstration by Julian Garnier on CodePen is also available as a download in the repository on GitHub as 3D-CSS-Solar-System, and is a data visualization coded in HTML/CSS and JavaScript. The full demonstration is displayed in Figure B. Toggles are available to switch between 2D and 3D views, point of view toggle, and viewing selections include settings for speed, size, and distance.

Figure B


Figure C is a view of the CodePen that shows the display panels of HTML, CSS, JavaScript, and resulting output in the bottom panel.

Figure C


Some of the CSS and CSS3 elements used in the solar system demonstration include article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, and section. Other CSS and CSS3 properties that help to create the animations include the following:

box-sizing: border-box; 
transform-style: preserve-3d;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: suborbit;

Animations use keyframes as shown in this CSS snippet below:

/* ---- animations */
@keyframes orbit {
  0% {
    transform: rotateZ(0deg); }

  100% {
    transform: rotateZ(-360deg); } }

@keyframes suborbit {
  0% {
    transform: rotateX(90deg) rotateZ(0deg); }

  100% {
    transform: rotateX(90deg) rotateZ(-360deg); } }

@keyframes invert {
  0% {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }

  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }

Transitions and transforms are used for setting orbits, planets, satellites, and rings, in addition to solar system and positions depending on the view selected. From the CodePen you can fork the project, share its URL, and export/download a zip file of the entire project.

CSS animation effects

Will Newton wrote a compelling article on highlighting CSS animation effects that leverage the power of CSS3 animation for web-based applications. He demonstrates three animation techniques for a simple view-slider, a creative use of 3D transforms, and a cross fader effect applying some jQuery and JavaScript to several CSS effects.

He shares his animations and the source code for all demos on; from there, you can modify the HTML, CSS, and any scripts that might be included. From the JSFiddle, you can run the edits in the web, update, and fork it into a new "Fiddle," tidy up any messy code, collaborate, and share the code with others if you wish.

The JSFiddle for the first animation, a simple view-slider technique, includes the HTML, CSS, and the live demonstration (Figure D).

Figure D

.screen {
.slider {
	-webkit-transition:all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
.slider img {

.screen:hover .slider {

CSS Cake demonstration

Check out Marco Barría's CodePen demonstration of CSS Cake (Figure E). Similar to JSFiddle, you can run, fork, and share the code. In addition, you can export the code in a compressed zip file so that you can modify the files locally; another option allows you to save it as a GitHub Gist.

Figure E


Final thoughts

These CSS examples highlight the next level of creativity and provide inspiration for the future growth of cutting-edge web applications. If you have a favorite CSS example, please tell us about it in the discussion.