Пример анимации CSS

Свойства CSS3 анимации, прекрасно заменяет некоторые Java скрипты с анимацией. CSS3 анимации — это новая технология которая поддерживается  не всеми браузерами. Смотрите пример анимации CSS3 «Языки пламени».

Оглавление:
  1. Повтор анимации
  2. Добавить импульсы
  3. Элементы огня

Начнем с простой анимацией, потом всё остальное. Берём изображение .PNG в виде пламени которое будет показываться в течение трех кадров.

3 кадра пламени
3 кадра пламени для анимации огня

Каждое пламя является 136px высотой 100 пикселей в ширину.

HTML

<div id="logfire">
<div id="flamegroup">
<div id="fl1"></div>
<div id="fl2"></div>
<div id="fl3"></div>
</div>
</div>

Контейнер div (#logfire) используется что бы провести фоновое изображение и заполнить div (#flamegroup), который будет держать наше пламя в одном месте. Внутри прототипа Я вложил 1/3 div (.flame), который станет нашим огнем.

Встроим рисунок пламени в фоновое изображение, разрешая только левую часть пламени.

.flame {
   width:100px;
   height:136px;
   background:url(flame.png) left top no-repeat}
Основная статическая разметка пламени
Основная статическая разметка

Повтор анимации

Мы должны создать 4 — рамки цикла, то есть, мы покажем кадры 1,2,3 и 2 раз, и повторим. Представим, что последовательность по нашей шкале, как бы невидимые позиции 0%, 25%, 50%, 75% и 100% (то есть обратно в кадр 1). На каждом этапе мы меняем наш фон на следующем кадре, значит CSS выглядит следующим образом:

@keyframes flicker { /* flame pulses */
  0% {
    background-position:0px 0px;
  }
  25% {
    background-position:-100px 0px;
  }
  50% {
    background-position:-200px 0px;
  }
  75% {
    background-position:-100px 0px;
  }
  100% {
    background-position:0px 0px;
  }
}​

Мерцание анимации нашего пламени, нужно установить в цикле 1.1 секунды:

.flame {
  ...
  animation: flicker 1.1s infinite;
}

Как показывают приведенные выше примеры, всё слишком красиво, изящно скользит между кадрами. Магия заключается в привязке каждого нового кадра на месте так быстро, что вы не видите промежуточное состояние кадра.

Новые временные сроки, теперь выглядит следующим образом:

@keyframes flicker { /* flame pulses */
  0% {
    background-position:0px 0px;
  }
  25% {
    background-position:0px 0px;
  }
  25.1% {
    background-position:-100px 0px;
  }
  50% {
    background-position:-100px 0px;
  }
  50.1% {
    background-position:-200px 0px;
  }
  75% {
    background-position:-200px 0px;
  }
  75.1% {
    background-position:-100px 0px;
  }
  100% {
    background-position:-100px 0px;
  }
}​

Как видите, наша первая ячейка остается неподвижной от 0% -25%. И вдруг на 25,1% по шкале, мы поворачиваем на фоне 100 пикселей влево. Опять же мы оставим его там до 50% знак перед согнуть его еще раз влево на 51,1%.

к меню ↑

Добавить импульсы

Пламя не просто двигаться, оно различается по интенсивности. Поскольку мы уже создали шкалу, почему бы не настроить прозрачность немного, чтобы придать ему тонкий пульс?

@keyframes flicker { /* flame pulses */
    0%,
    100%{background-position:0px 0px; opacity:.8 }
    25% {background-position:-100px 0px;}
    50% {background-position:-200px 0px;; opacity:.4;}
    75% {background-position:-100px 0px;}
}

Достойный результат: но мы могли бы получить что-то очень близко к хорошо анимированными файлами GIF.

к меню ↑

Элементы огня

По окружности к нашей первоначальной HTML, мы собираемся добавить больше элементов огня.

Давайте добавим еще два div элементов с «пламенем» в классе нашего flamegroup. Мы также дадим каждой div свой собственный ID.

Теперь у нас есть три элемента огня, но так как они танцуют в унисон, они все еще выглядят как единое пламя. Давайте удалим анимацию класса «пламени» и добавить его в наш новый ID.

#fl1 {
   -webkit-animation: flicker .7s infinite;
}
#fl2 {
   -webkit-animation: flicker .7s infinite;
}
#fl3 {
   -webkit-animation: flicker .7s infinite;
}

И наконец на ложем их точно друг на друга, добавим каждому пламени (10 — 20 пикселей). В основном это, чтобы мы могли видеть как смешиваются и взаимодействуют края.

CSS

#fl1 {
   animation: flicker 1.3s steps(1) infinite;
    top:20px;
    left:10px
}
#fl2 {
   animation: flicker .7s steps(1) infinite;
    top:10px;
    left:20px;

}
#fl3 {
   animation: flicker 1.1s steps(1) infinite;
}

Рекомендуем прочитать статьи:

Анимация имеет некоторые интересные возможности, так что следите за еще несколькими экспериментами. А если у вас есть собственные идеи, поделитесь ими в комментариях.