CSS3 Animations

Простой, понятный пример

by akogch

HTML

<div class="animation-container">Далеко-далеко за словесными.</div>

CSS

.animation-container {
  height: 60px;
  padding: 10px;
  -webkit-animation-name: movearound;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease;
}

@-webkit-keyframes movearound {
  from {
    width: 200px;
    background: #f00;
    opacity: 0.5;
    -webkit-transform: scale(0.5) rotate(15deg);
  }

  to {
    width: 400px;
    background: #ffffa2;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}