CSS3 Animations

CSS3 анимации - с ключевыми кадрами, итерациями и многим другим

by akogch

HTML

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

CSS

.animation-container {
  height: 60px;
  padding: 10px;
  /* Shorthand syntax */
  -webkit-animation: movearound 4s ease 3 normal;
}

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

  30% {
    width: 300px;
    background: #f00;
    opacity: 1;
    -webkit-transform: scale(1.3) rotate(15deg);
  }

  60% {
    width: 100px;
    background: #00f;
    opacity: 0.3;
    -webkit-transform: scale(0.3) rotate(15deg);
  }

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