0
Я хочу анимировать parent-round-div при возврате к исходному размеру. Можно ли сделать анимацию после окончания текущей анимации?Как я могу анимировать элемент, когда анимация закончила свою последовательность
Это мой код:
.parent-round-div{
position: absolute;
border: 2px solid black;
border-radius: 50%;
width: 70px;
height: 70px;
background: green;
-webkit-animation-name: sizeAnimate;
-webkit-animation-duration: 2s ;
-webkit-animation-iteration-count: infinite;
animation-name: sizeAnimate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.child-round-div{
margin:10%;
position:relative;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
border: 1px solid black;
border-radius: 50%;
height: 70px;
width:70px;
font-size: 50px;
text-align: center;
background: red;
}
@-webkit-keyframes sizeAnimate{
from{
width: 70px;
height: 70px;
}
to{
width: 80px;
height: 80px;
}
}
@keyframes sizeAnimate{
from{
width:70px;
height: 70px;
}
to{
width: 80px;
height: 80px;
}
}
<div class = "parent-round-div">
<div class="child-round-div">
A
</div>
</div>
Когда будет начальный эффект? Это наведите курсор или нажмите? Значит ли это, когда происходит вторая анимация? Если нет - вы можете просто добавить задержку анимации http://www.w3schools.com/cssref/css3_pr_animation-delay.asp –
Когда загружается загрузка страницы, и после анимации будет запущена другая анимация на родительском компьютере, круглодонные дела. –
@AbzRockers Вопрос не очень ясен. Когда должна произойти вторая анимация и как она должна срабатывать? Должно ли автоматически запускаться сразу после завершения первой анимации? Должен ли он срабатывать после некоторой задержки? Должен ли он запускаться после взаимодействия с пользователем? Когда? – Harry