Подскажите как сделать анимацию, которую можно зациклить и при этом чтобы объект изначально находился в уменьшенном состоянии, а потом трансформировался в свой реальный размер. Что-то по типу: animation: pulse
только в обратную сторону. Спасибо.
-
transform: scale(XX < 1) --> transform: scale(1)– soledar101 июл 2019 в 16:53
Добавить комментарий
|
2 ответа
Решение svg
- Рисуете круг в SVG
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250" style="border:1px solid gray;">
<circle cx="125" cy="125" r="50" fill="purple" stroke-width="8" stroke="gold" >
</circle>
</svg>
- Анимируете увеличение радиуса окружности в сторону увеличения и
уменьшения
values="50;100;50"
Анимация начинается после клика begin="svg1.click"
При одном повторении анимации - repeatCount="1"
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250" style="border:1px solid gray;">
<circle cx="125" cy="125" r="50" fill="purple" stroke-width="8" stroke="gold" >
<animate attributeName="r"values="50;100;50" dur="2s" begin="svg1.click" fill="freeze" repeatCount="1" />
</circle>
</svg>
- Зацикливание
repeatCount="indefinite"
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250" style="border:1px solid gray;">
<circle cx="125" cy="125" r="50" fill="purple" stroke-width="8" stroke="gold" >
<animate attributeName="r"values="50;100;50" dur="2s" begin="svg1.click" fill="freeze" repeatCount="indefinite" />
</circle>
</svg>
- Чтобы сделать паузы в конечных состояниях анимации добавляете повторы значений конечных позиций
values="50;100;100;50;50"
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250" style="border:1px solid gray;">
<circle cx="125" cy="125" r="50" fill="purple" stroke-width="8" stroke="gold" >
<animate
attributeName="r"
values="50;100;100;50;50"
dur="2s"
begin="svg1.click"
fill="freeze"
repeatCount="indefinite" />
</circle>
</svg>
Пример
.block {
width: 100px;
height: 100px;
background-color: #00f;
border-radius: 50%;
transform: scale(.85);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
from {
transform: scale(.85);
}
50% {
transform: scale(1);
}
to {
transform: scale(.85);
}
}
<div class="block"></div>