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

The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. This includes releases of HTML and CSS.


selector {
  property: value;
  -webkit-property: value;
  -moz-property: value;
  -ms-property: value;
  -o-property: value;
div {
  transform: rotateX(-30deg);
  -webkit-transform: rotateX(-30deg);
  -moz-transform: rotateX(-30deg);
  -ms-transform: rotateX(-30deg);
  -o-transform: rotateX(-30deg);

More reading on vendor prefixes / browser integration: 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, 255, 255, 1); 
  background: rgba(0, 0, 0, 0.5); 
Independent opacity rgba colors

Hue/saturation/luminance color

color: hsla(
HSL example hsla colors

☞ Experiment more: HSL Color Picker


background-image: linear-gradient(to bottom,
  #f95a61 0%, 
  #ffffff 50%, 
  #2a4758 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 styling

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: turquoise;
  -webkit-text-stroke-width: 0.00px; 

  text-align: left;
  text-decoration: overline pink wavy;
  text-transform: uppercase;
  text-indent: 100px;
Styling text! 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: contrast(80%); 
filter: blur(5px); 
filter: sepia(20%); 
filter: invert(0%); 
filter: opacity(50%); 
filter: hue-rotate(60deg); 
filter: grayscale(10%); 
filter: brightness(120%); 
filter: drop-shadow(5px 5px black); 
filter: saturate(110%); 


@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.


Define a CSS Animation

Define a custom CSS3 animation (in this case, named "pulse") using CSS3 @keyframes:

      @keyframes pulse {

        from {
         opacity: 0.0;
         font-size: 100%;

        to {
         opacity: 1.0;
         font-size: 200%;


Apply a CSS Animation

Apply the CSS animation you defined to a specific HTML element.

    div {
      animation-name: pulse;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in;
      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 {
  animation-name: rainbow;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-direction: alternate;
Taste the rainbow! animations


#box.left {
  margin-left: 0;

#box.right {
  margin-left: 1000px;
  • Click => document.getElementById('box').className = 'left';
  • Click => document.getElementById('box').className = 'right';
#box {
  transition: margin-left 1s ease-in-out;
  • Click => document.getElementById('box').className = 'left';
  • Click => document.getElementById('box').className = 'right'; css-transitions


      You can transform this div by hovering over it!
#transform-example {
  transform: rotateZ(5deg);
  transition: transform 2s ease-in-out;

#transform-example:hover {
  transform: rotateZ(-5deg);

Other Transform Values

  • translate – translate element along X, Y, or Z axes (in deg, rad, turn, or %)
  • scale – scale size of element along X or Y axes (in integers – e.g. 2.0 for 200% scale)
  • rotate – rotate element along X, Y, or Z axes (in deg, rad, or turn)
  • skew – skew element along X or Y axes (in deg or rad)
  • perspective - set perspective from which element is viewed (in px)
  • Additional Properties 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.