CSS3 Анимация по ключевым кадрам с различными объектами

В этой статье мы будем создавать анимированную картинку исключительно средствами CSS3 и разберёмся как создать простую, но яркую и разнообразную картину.
И как с анимацией облаков , всё будет показано пошагово, визуально и с краткими примерами. В этом примере будет использована картинка Южного Тироля. Картина показывает Santnerspitze.

Во-первых, начнём с неподвижной части изображения. Изображение Santnerspitze, использованное в этой анимации в качестве фона, разделено на несколько уровней. Первый уровень используется в качестве фона для анимации и состоит только из неба. Перед ним, с домами и деревьями, расположен следующий слой, так что облако может двигаться позади. Лужайка на переднем плане, в свою очередь, состоит из трех дополнительных уровней каждый из которых представляет только часть луга, и они также сохранены в PNG формате.

Анимация облаков

В статье облако анимация уже в подробностях описывалось  функционирование ключевых кадров, так что здесь показана только интеграция HTML5 и CSS3 . Единственная разница в анимации от предыдущей статьи, в том, что изображения включены не в HTML5, а непосредственно в CSS3.
В этой анимации два облака позиционируются с помощью “z-index” за горой. Во-вторых, меньшее облако немного смещено вверх и движется быстрее чем первое. И так как второе облако должно появиться в кадре только через 10 секунд, оно было с помощью “left: -135px” помещенно за кадром.

Анимация цветов

 

Цветы немного отличаются от анимированных облаков.
В отличие от облаков они не имеют команды бесконечного цикла “infinite”, они управляются командой “forwards”. Таким образом, объект по истечении времени анимации сохраняет стиль предыдущего “@ KeyFrames”. Другими словами, цветы остаются на лужайке и не растут снова.

Анимация летающих птиц

Особенностью птиц является движение крыльев, поэтому файл создан с использованием GIF-анимации. Для того, чтобы реально изобразить движение птичьего полета, анимацию необходимо совместить со взмахом крыльев. Непрозрачность уменьшена до 90%.

Структура HTML выглядит следующим образом.

<div id="hg">
    <div id="santner"> </div>
    <div id="wiese1"> </div>
    <div id="wiese2"> </div>
    <div id="wiese3"> </div>
    <div id="wolke1"> </div>
    <div id="wolke2"> </div>
    <div id="adler"> </div>
    <div id="vogel"> </div>
</div>

CSS3.

#hg {
    position: relative;
    overflow: hidden;
    background: url(http://www.webdesign-klamonfra.de/bilder/Seis.JPG) no-repeat;
    height: 35.2em;
    width: 46.9em;
    font-family: Comic Sans MS;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    border-radius: 20px;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    margin: 2em;
    z-index: 1;
}

#santner,
#wiese1,
#wiese2,
#wiese3 {
    position: absolute;
    height: 35.2em;
    width: 46.9em;
}

#santner {
    background: url(http://www.webdesign-klamonfra.de/bilder/santnerspitze.png) no-repeat;
    z-index: 10;
}

#wiese1 {
    background: url(http://www.webdesign-klamonfra.de/bilder/wiese1.png) no-repeat;
    z-index: 20;
}

#wiese2 {
    background: url(http://www.webdesign-klamonfra.de/bilder/wiese2.png) no-repeat;
    z-index: 30;
}

#wiese3 {
    background: url(http://www.webdesign-klamonfra.de/bilder/wiese3.png) no-repeat;
    z-index: 40;
}





#wolke1,
#wolke2 {
    position: absolute;
    height: 5em;
    width: 5em;
    background: url(http://www.webdesign-klamonfra.de/bilder/wolke_klein.png) no-repeat;
}

#wolke1 {
    z-index: 2;
    animation: wolke1 300s infinite linear;
}

@keyframes wolke1 {
    from{transform: scaleX(6) translate3d(-45px,40px,0)}
    to{transform: scaleX(5.7) translate3d(160px,40px,0)}
}

#wolke2 {
    z-index: 5;
    left: -135px;
    animation: wolke2 60s infinite linear 10s;
}

@keyframes wolke2 {
    from{transform: scaleX(2.3) translate3d(-60px,10px,0)}
    to{transform: scaleX(1.5) translate3d(600px,10px,0)}
}




#adler {
    position: absolute;
    left: -125px;
    height: 13.9em;
    width: 15.6em;
    background: url(http://www.webdesign-klamonfra.de/bilder/adler.gif) no-repeat;
    opacity: .9;
    z-index: 12;
    animation: adler 30s infinite linear;
}

@keyframes adler {
    from{transform: scale(.15) translate3d(-125px,40px,0)}
    to{transform: scale(.3) translate3d(2700px,450px,0)}
}

#vogel {
    position: absolute;
    left: 585px;
    height: 1.7em;
    width: 1.9em;
    background: url(http://www.webdesign-klamonfra.de/bilder/vogel.gif) no-repeat;
    opacity: .9;
    z-index: 12;
    animation: vogel 40s infinite linear;
}

@keyframes vogel {
    from{transform: scale(.5) translate3d(380px,150px,0)}
    to{transform: scale(.5) translate3d(-1300px,80px,0)}
}

Пример:

 

Оригинал / Перевод