[CSS3] CSS Animation

CSS Animation

How to use CSS3 animation
The CSS animation feature was introduced into Webkit in 2007. In 2009 a working draft was written and added to the w3c site. Over the next three years support was gained by Firefox, Internet Explorer and finally Opera.

To use CSS animation, you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the tweening for you.

 

1. Specify Keyframes

@-webkit-keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#box:hover {
  -webkit-animation-name: resize;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -o-animation-name: resize;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;
  -moz-animation-name: resize;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

 

2. Pulsate Button Sample

@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-moz-keyframes glow {
  0% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-o-keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
#animationDemo2 {
  width:255px;
  margin:10px auto;
}
#animationDemo2 button {
    width: 255px;
    height: 35px;
    background: #cde;
    border: 2px solid #ccc;
    border-color: rgba(0,0,255,0.5);
    font-size:18px;
    color: #000;
    text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px;
    text-align: center;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
  }
#animationDemo2 button:hover{
  background-color:#cce;
  -webkit-animation-name: glow;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: glow;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;

  -o-animation-name: glow;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;

  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}