CSS3 Animation

// Define your animation at 0%, 50% and 100%
// This animation will animate from 500px to 800px and back to 500px
@keyframes "TestAnimation" {
  0% {
    width: 500px;
  }
  50% {
    width: 800px;
  }
  100% {
    width: 500px;
  }
}
@-moz-keyframes TestAnimation {
  0% {
    width: 500px;
  }
  50% {
    width: 800px;
  }
  100% {
    width: 500px;
  }
}
@-webkit-keyframes "TestAnimation" {
  0% {
    width: 500px;
  }
  50% {
    width: 800px;
  }
  100% {
    width: 500px;
  }
}
@-ms-keyframes "TestAnimation" {
  0% {
    width: 500px;
  }
  50% {
    width: 800px;
  }
  100% {
    width: 500px;
  }
}
@-o-keyframes "TestAnimation" {
  0% {
    width: 500px;
  }
  50% {
    width: 800px;
  }
  100% {
    width: 500px;
  }
}

// Your element which you are going to animate
.animate-me {
  width: 500px;
  height: 200px;
  background-color: #fe7000;
  position: absolute;
}

// Attach your animation to your chosen element on hover
// Animation will take 5 seconds and loop infinitely while hovering
.animate-me:hover {
  -webkit-animation: TestAnimation 5s ease-in-out infinite;
  -moz-animation: TestAnimation 5s ease-in-out infinite;
  -ms-animation: TestAnimation 5s ease-in-out infinite;
  -o-animation: TestAnimation 5s ease-in-out infinite;
  animation: TestAnimation 5s ease-in-out infinite;
}