Урок: создание анимации

Создание анимации в CSS3 — увлекательный процесс. С помощью несложных манипуляций и, главное, без использования скриптов, можно перемещать и скрывать html-элементы, изменять их размеры, цвет, создавать реалистичные объемные эффекты, анимируя тень элемента, и многое другое.

Анимация состоит из плавных изменений одного состояния элемента в другое с помощью функций перехода animation-timing-function на протяжении указанного времени. На каждом этапе анимации можно задавать свою функцию перехода.

Самое главное при создании анимации — правильно задать ключевые моменты. Анимация может начинаться с 50%, а начальное и конечное состояния анимируемого элемента будут соответствовать заданному в свойствах элемента (так называемые вычисляемые значения).

See the Pen Clouds animation by Elena Nazarova (@nazarelen) on CodePen.

Основные элементы (башня, дом, одиночное облако) рисуются с помощью CSS-стилей, а элементы отделки (крыша, окна и маленькое облачко) — с использованием псевдоэлементов :before и :after.

<div class="picture">
  <div class="clouds">
  <div class="cloud one"></div>
  <div class="cloud two"></div>
  <div class="cloud three"></div>
  </div>
  <div class="clouds-two">
  <div class="cloud one"></div>
  <div class="cloud two"></div>
  <div class="cloud three"></div>
  </div>
  <div class="tower"></div>
  <div class="house">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

body {
  margin: 0;
  background: white;  /*скрываем облака, когда они будут выходит за границы голубого блока*/
}
.picture {
  width: 270px;
  height: 270px;
  background: #CFDEE6;
  border-radius: 50%;
  margin: 50px auto 0;
  position: relative;  /*задаем относительное позиционирование, чтобы абсолютно позиционировать элементы внутри*/
  overflow: hidden;  /*скрываем облака, когда они будут уходить за границы блока*/
}
.tower {
  width: 36px;
  height: 96px;
  background: white;
  position: absolute;
  bottom: 84px;
  left: 66px;
}
.tower:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 24px solid #D56851;
  position: absolute;
  top: -24px;
}
.tower:after {
  content: "";
  width: 12px;
  height: 15px;
  background: #6D6D6D;
  position: absolute;
  top: 12px;
  left: 12px;
}
.house {
  width: 126px;
  height: 36px;
  background: white;
  position: absolute;
  left: 75px;
  bottom: 84px;
}
.house:before {
  content: "";
  width: 110px;
  height: 0;
  border-bottom: 15px solid #D56851;
  border-right: 16px solid transparent;
  position: absolute;
  top: -15px;
}
.house:after {
  content: "";
  width: 83px;
  height: 21px;
  background: #D56851;
  position: absolute;
  top: -36px;
  left: 27px;
}  
ul {
  margin: 7px 0 0 27px;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  width: 12px;
  height: 18px;
  background: #6D6D6D;
}
li:nth-child(3) {
  margin-right: 10px;
}
@-webkit-keyframes clouds {
  50% {left: 270px; opacity: 0.5}  /*перемещаем блок с облаками за правый край голубого блока, постепенно делая блок прозрачным*/
  51% {opacity: 0;}  /*чтобы когда он начал перемещаться за левый край голубого блока, его не было видно*/
  100% {opacity: 0; left: -110px;}  /*смещаем блок с облаками за левую границу голубого блока*/
}
@keyframes clouds {
  50% {left: 270px; opacity: 0.5}
  51% {opacity: 0;}
  100% {opacity: 0; left: -110px;}
}
.clouds {
  width: 110px;
  height: 40px;
  position: relative;
  overflow: hidden;
  top: 60px;
  left: -110px; 
  -webkit-animation: clouds 20s linear infinite;
  animation: clouds 20s linear infinite;
}
.clouds-two {
  width: 110px;
  height: 40px;
  position: relative;
  overflow: hidden;
  top: 20px;
  left: -110px; 
  -webkit-animation: clouds 20s linear infinite 10s;  /*добавляем для второго блока с облаками задержку в анимации*/
  animation: clouds 20s linear infinite 10s;
}
.cloud {
  background: white;
  position: absolute;
}
.one {
  width: 30px;
  height: 15px;
  border-radius: 60px 60px 0 0;
  top: 0;
  left: 0;
}
.one:after {
  content: "";
  width: 20px;
  height: 8px;
  background: white;
  border-radius: 40px 40px 0 0;
  position: absolute;
  left: 20px;
  top: 7px;
}
.two {
  width: 24px;
  height: 10px;
  border-radius: 48px 48px 0 0;
  top: 30px;
  left: 30px;
}
.three {
  width: 30px;
  height: 15px;
  border-radius: 60px 60px 0 0;
  top: 25px;
  left: 80px;
}
.three:before {
  content: "";
  width: 20px;
  height: 8px;
  background: white;
  border-radius: 40px 40px 0 0;
  position: absolute;
  left: -10px;
  top: 7px;
}