Как исправить пульсирующие кнопки?
Здравствуйте. Подскажите, как сделать, чтобы кнопки пульсировали не при наведении, а автоматически после загрузки страницы, не одновременно, а по очереди, и только по одному разу каждая?
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>
|
Lefseq,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
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;
animation: big 3s ease-in-out infinite;
}
.box1 {
background: #F9A88B;
}
.box2 {
background: #F9A88B;
animation-delay: 1s;
}
.box3 {
background: #F9A88B;
animation-delay: 2s;
}
@keyframes big{
0% {
transform: scale(1);
}
20% {
transform: scale(2);
}
30%{
transform: scale(1);
}
}
</style>
</head>
<body>
<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>
</body>
</html>
|
| Часовой пояс GMT +3, время: 16:19. |