css анимация на сайте

В настоящее время с помощью css анимации можно сделать практически всё что угодно. Gif и javascript анимация постепенно уходят на второй план. Преимущество css анимации:

• Малый вес кода
• Быстрое исполнение, отсутствии тормозов
• Исполнение при включенных плагинах- блокировщиках javascript

Недостаток только один- пока ещё не хватает некоторых возможностей, для управления анимацией, но постепенно и этот момент решится.

И так, наша цель- красивая css анимированная кнопка:

Пример на отдельной странице

Разберём как это работает.

Мы создали контейнер .myconteiner с фиксированной шириной и свойством overflow:hidden которое отключает отображение полос прокруток если дочерние элементы вышли за пределы родительского. Далее добавили кнопку .button и 2 анимированных круглешочка .anim1 и .anim2 соответственно. Анимированным элементам присвоено абсолютное позиционирование(position:absolute), что бы мы могли использовать свойства left и right для управления координатами, а сами координаты выставлены за пределом видимости родителя. И непосредственно сама css анимация задаётся свойством transition:all 0.3s ease-in 0s:

• all - отслеживать все свойства элемента, можно задать какое-то конкретное
• 0.3s - длительность анимации
• ease-in - тип анимации
• 0s - задержка перед выполнением анимации

Что бы анимация сработала нужен триггер. У нас этим триггером выступает css стиль .button:hover ~ .anim1. При наведении мышки на нашу кнопу устанавливаются новые координаты и прозрачность, и анимация срабатывает автоматически.

Стили:

<style>
.myconteiner
  {
  width:700px;
  /*height:200px;*/
  background:#eee;
  border:1px solid #ddd;
  border-radius:3px;
  margin:10% auto;
  text-align:center;
  position:relative;
  overflow:hidden;
  }
.myconteiner p
  {
  padding:0;
  margin:0;
  font-size:0px;
  }
.button
  {
  display:block;
  color:#000;
  text-decoration:none;
  border-radius:100px;
  width:150px;
  height:150px;
  border:1px solid #ddd!important;
  text-align:center;
  font-size:16px;
  text-transform:uppercase;
  cursor:pointer;
  line-height:150px;
  margin:0 auto;
  position:relative;
  z-index:10;
  background:#eee;
  transition:background 0.3s linear 0s;
  }
.anim1
  {
  z-index:5;
  position:absolute;
  top:0px;
  left:-200px;
  width:150px;
  height:150px;
  border:1px solid #ddd;
  background:#fdd;
  border-radius:150px;
  line-height:150px;
  transition:all 0.3s ease-in 0s;
  opacity:0;
  color:#ccc;
  }
.anim2
  {
  z-index:5;
  position:absolute;
  top:0px;
  right:-200px;
  width:150px;
  height:150px;
  border:1px solid #ddd;
  background:#ddf;
  border-radius:150px;
  line-height:150px;
  transition:all 0.3s ease-in 0s;
  opacity:0;
  color:#ccc;
  }
.button:hover
  {
  background:#ddd;
  }
.button:hover ~ .anim1
  {
  left:200px;
  opacity:1;
  }
.button:hover ~ .anim2
  {
  right:200px;
  opacity:1;
  }
</style>

И html разметка:

<div class="myconteiner">
<a href="#" class="button">Нажми меня</a>
<div class="anim1">Нажми меня</div>
<div class="anim2">Нажми меня</div>
</div>