1

Подскажите как сделать анимацию, которую можно зациклить и при этом чтобы объект изначально находился в уменьшенном состоянии, а потом трансформировался в свой реальный размер. Что-то по типу: animation: pulse только в обратную сторону. Спасибо.

1
  • transform: scale(XX < 1) --> transform: scale(1)
    – soledar10
    1 июл 2019 в 16:53

2 ответа 2

3

Решение 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>

1
  • Спасибо за подробный урок.
    – Nihroms
    3 июл 2019 в 7:04
2

Пример

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.