Как правильно сделать анимацию блока на css и jquery?

Question

[Returb0]

Как сделать анимацию увеличения и уменьшения во все 4 стороны одновременно?
То есть блок как бы увеличился, а после сразу же вернулся к стандартному размеру.

Допустим был блок 40Х60, по нему кликнули, он плавно увеличился до 50Х70 и после сам плавно уменьшился к изначальным 40Х60

Пробовал анимировать ту же 'width', но блок увеличивается только правой стороны.
'marginLeft' и 'marginRight' увеличивает не одновременно, а поочередно....

Answer 1

[Alexander Pushkarev]

Смотря как расположен у вас родитель и какие на нём свойства. Можно через scale, просто увеличением размеров.

Размер

Comments

[Returb0]

Извините, что так долго.
Вот полный код с наглядным местоположением элементов.
В общем нужно, чтобы анимировалось "модальное окно".

[Alexander Pushkarev]

Returb0, https://jsfiddle.net/j1gt52sc/

[Returb0]

Alexander Pushkarev, Спасибо, но это не совсем то, что нужно.
Сейчас по клику происходит только увеличение, а нужно чтобы он после увеличения немного уменьшился.
То есть у блока 3 состояния
1. блок скрыт
2. блок увеличен (например по клику блок стал 50Х70 )
3. Блок немного уменьшен (а после чуть уменьшился и стал 40Х60 )

То есть анимация "резины", даже не знаю как обозвать, когда резину растягиваешь а потом она сама уживается до своего обычного размера. И тут также, мы как бы растягиваем блок по клику, а потом он возвращается к своему обычному размеру (40Х60 как в примере)

[Мария Коробкоголовых]

Может css анимация поможет

[Returb0]

Мария Коробкоголовых, просто задача вроде бы не сложная, и не хотелось бы подключать из-за нее плагины. Но спасибо.
В общем там с кейфреймами нужно было поколдовать)

[Мария Коробкоголовых]

Returb0, я не предлагала плагинов, анимация в самом деле простая :)

.div {
  animation: animate 2s infinite;
}

@keyframes animate {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}