Как исправить пульсирующие кнопки?

D
На сайте с 01.09.2015
Offline
56
77

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

body {font-family: 'Playfair Display', serif; margin: 0;}
.wrap {text-align: center;}
.container {
  display: inline-block;
}
 
.box {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 20px 50px 0;
}
.wrap:hover .box {
  -webkit-transform: scale(2);
  -ms-ransform: scale(2);
  transform: scale(2);
}
 
.box1 {
  background: #F9A88B;
  transition: 1s;
}
 
.box2 {
  background: #F9A88B;
  transition: 1s;
}
 
.box3 {
  background: #F9A88B;
  transition: 1s;
}
<div class="wrap">
 
  <div class="container">
  
    <div class="box1 box"></div>
  </div>
  
     <div class="container">
  
    <div class="box2 box"></div>
  </div>
  
  <div class="container">
  
    <div class="box3 box"></div>
  </div>
 
</div>


P0
На сайте с 17.06.2010
Offline
83
#1

анимация через animation и keyframes

пауза через animation-delay

https://jsbin.com/viqujijunu/edit?css,output

JS Bin
JS Bin
  • jsbin.com
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...
|| Качественный хостинг - https://clck.ru/Qd8jw ||

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий