Press key to advance.

CSS3 Effects & Animation

CSS Recap

selector {
  property: value;
  property: value;
body {
  color: yellow;
  background-color: black;
  font: 10px sans-serif;
#container {
  width: 70%;
  padding: 10px;
  margin: auto;
  border-bottom: 1px solid #ccc;

CSS History

  • 1996: CSS1
  • 1998-2011: CSS2
  • 1999-Now: "CSS3"

All CSS Specs


selector {
  property: value;
  -webkit-property: value;
  -moz-property: value;
  -ms-property: value;
  -o-property: value;
div {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;

More reading: MDN Vendor Prefix,


Rounded corners

              face: border-radius: 0px; 
              left eye: border-radius: 0px; 
              right eye: border-radius: 0px; 
              base white: border-radius: 0px; 
              mouth: border-radius: 0px; 
              nose: border-radius: 0px; 
              left black eye: border-radius: 0px; 
              right black eye: border-radius: 0px; 


  color: rgba(255, 0, 0, 0.75); 
  background: rgba(0, 0, 255, 0.75); 
Independent opacity rgba colors

Hue/saturation/luminance color

color: hsla(
HSL example rgba colors
Changing just saturation:
Screenshot of HSL color picker, low saturation and high saturation
Changing just brightness:
Screenshot of HSL color picker, low brightness and high brightness

☞ Experiment more: HSL Color Picker


background-image: linear-gradient(to bottom, #00abeb 0%, #fff 50%,
                            #66cc00 50%, #fff 100%);

background-image: radial-gradient(center, circle cover, red, #000 40%);

More reading: MDN: linear-gradient


  rgba(64, 64, 64, 0.5) 

box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
Such a shady div. shadows

Text stroke

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: turquoise;
  -webkit-text-stroke-width: 0.00px; 
Stroke Ain't A Joke! text-stroke

Exercise: Make Your Logo

  1. Start with this HTML. You can view page source and copy it into a local file or a new page on
  2. Change the font size and alignment of the text to be bigger and centered.
  3. Add a stroke to your logo text, using HSLA to specify the fill and stroke colors.
  4. Use RGBA to specify the background color of the container and add some padding.
  5. Round the corners of the container.
  6. Generate a gradient for the container. You can use this tool if you'd like.
  7. Add a shadow to your text.
  8. Add a shadow on the box.


filter: grayscale(10%); 
filter: sepia(20%); 
filter: saturate(110%); 
filter: hue-rotate(60deg); 
filter: invert(0%); 
filter: brightness(120%); 
filter: contrast(80%); 
filter: blur(5px); 
filter: drop-shadow(5px 5px black); 
filter: opacity(50%); 


@font-face {
  font-family: 'LeagueGothicRegular';
  src: url('fonts/leaguegothic/leaguegothic-webfont.eot');
.special-header {
  font-family: 'LeagueGothicRegular', sans-serif;
Look, I'm in League Gothic font!
How font-face works

Finding fonts:

Exercise: Motivational Quote

  1. Start with this HTML. You can view page source and copy it into a local file or a new page on
  2. Replace the text with a quote that motivates you.
  3. Use a custom font for the quote text.
  4. Find a new image. You can use to find Public Domain licensed images.
  5. Use filter to change how the image looks.
  6. If you have time left, try using properties you learned earlier as well.



@-webkit-keyframes pulse {
from {
 opacity: 0.0;
 font-size: 100%;
to {
 opacity: 1.0;
 font-size: 200%;

div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
-webkit-animation-direction: alternate;
Pulse! animations

Multi-Step Animations

@keyframes rainbow {
    0%   {
      background-color: red;
    25%  {
      background-color: yellow;
      width: 200px;
    50%  {
      background-color: blue;
      width: 300px
    100% {
      background-color: green;
      width: 200px;

div {
  -webkit-animation-name: rainbow;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: alternate;
Taste the rainbow! animations


#box.left {
  margin-left: 0;
#box.right {
  margin-left: 1000px;

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
#box {
  -webkit-transition: margin-left 1s ease-in-out;

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; css-transitions


Hover over me:

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;

#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
} transforms

Exercise: Animated Logo

  1. Start with your logo page.
  2. Animate your logo in some way. You can start with the pulse from the slides and then experiment.
  3. Transform your logo when you hover over it.


Without a Pre-processor

#header {
  width: 500px;

#header .logo {
  color: #F5D867;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;

#header .logo a {
  color: #FFD980;

#header .logo a span {
  background-color: #F5D867;

...Not the optimal syntax.

With a Pre-processor


@mainColor: #99cc00;

#header {
  .logo {
    color: lighten(@mainColor, 20%);
   @include border-radius (3px);

➜ styles.css:

#header .logo {
  color: #F5D867;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;

Common features

  • variables
  • nesting
  • mix-ins
  • inheritance
  • color functions
  • vendor prefixes.

Popular Pre-processors

  • SaSS with Compass
    Biggest community of users
  • Less
    Basis for Twitter Bootstrap
    Can be run in the browser
  • Stylus
    Punctuation free

Pre-processors comparison

Another option: The Autoprefixer Post-Processor