Fun & Flair with CSS3 Animations

By @alexisgoldstein


One last thing...

Some Questions for You


a : endowed with life or the qualities of life : alive
b : full of movement and activity
c : full of vigor and spirit : lively

Animations can:

Two Animation Routes in CSS3:

CSS Transition Basics:

Basic syntax, with the two required properties:

   transition-property: transition-property;
   transition-duration: transition-duration;

CSS Transition Basics:


  transition-property: width;
  transition-duration: 2s;	

Whichever element you assign these properties to, when the width changes, it’ll change over the course of 2 seconds.

CSS Transition Properties:

Additional Transition Properties:

transition shorthand:

transition: transition-property transition-duration transition-delay transition-timing-function;
transition: background-color 1s 2s ease;

Widening an input element on focus


A Navigation Pointer


We can combine a bit of jQuery with some transitions on margin to create a moving navigation pointer:

#triangle { transition: margin-left 1s; }
#triangle.home {  margin-left: 4.2em; }
#triangle.about {  margin-left: 10.2em; } {  margin-left: 16.2em; }

This is a kitten drinking beer

CSS Animations

CSS Animations allow us to create more complex animations, with multiple points between the beginning and the end of the animation.

CSS Animation Basics

the keyframes @ rule:

@-webkit-keyframes spin {
	0% { -webkit-transform: rotateY(0); }
	100%   { -webkit-transform: rotateY(-360deg); }
-webkit-animation: spin 18s infinite linear;

Spin Me Right Round, Baby


CSS Animation Basics

animation: spin 18s infinite alternate forwards linear;
animation is the shortcut syntax for the following properties: animation-name, animation-duration, animation-iteration-count,animation-direction, animation-fill-mode and animation-timing-function


One of the optional animation properties that is very important to understand is animation-fill-mode. The values you can set this property to are forwards, backwards, both or none.

This property defines whether or not changes made to properties during the animation persist after the animation. The default is none, which means any styles added during the animation go away once it ends.

Setting animation-fill-mode: forwards; will ensure that any changes made during the animation persist after it.


A very helpful starting point for CSS Animations is Animate.css

A Rotating Eye

A Bouncing Spring

@-webkit-keyframes spring {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1, 0.5); }
/* quickly snaps back, longer than before */
40% { -webkit-transform: scale(1, 1.5); } /* continues...*/
#spring { -webkit-animation: spring 2.8s 3; }
Visualization at:

Complete code up at:

Don't Just Background-Image, Animate

A great way to add animations to your sites is to take existing static images and add either subtle looping animations (via CSS animations), or transitions triggered by user actions.

Rocking the Boat

@keyframes rock {
 from { transform: rotateZ(-2deg); }
 to {  transform: rotateZ(4deg); }            

animation: rock 2s infinite ease-in-out alternate;

Varying Boat Size with Media Queries

.main aside {
	width: 150px;
	height: 200px;
@media only screen and (min-width: 768px) {
  .main aside {
  	width: 270px;
  	height: 350px;

Ocean Waves

Ocean Waves

@keyframes wavespass {
 from {  background-position: 0% 0%; }
 to { background-position: -3% 0%; }
animation: wavespass 2s infinite linear alternate forwards;

Ocean Waves

@keyframes oceanrise {
  to { -webkit-transform: scale(1,1.4); }
animation: oceanrise 2s infinite linear alternate forwards;