Что в данном случае происходит при анимации див блока?

Question

[Muranx]

Здравствуйте, задача простейшая. . . У меня есть кнопочка, при наведении на которую мне нужно чтобы была как - бы волна, ну короче всё поймёте из кода . . .

<div class="wrapper">
    <div class="outer"></div>
    <div class="forFakeBorder"></div>
</div>

@keyframes fakeborder{
  from{
    border: none;
    transform: scale(1);
  }to{
    border: 3px solid green;
    transform: scale(1.5);
  }
}

*{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
.wrapper{
  width: 80px;
  height: 80px;
  margin: 80px auto;
  position: relative;
  border: 1px solid red;
}

.outer{
  width: 60px;
  height: 60px;
  border: 1px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.forFakeBorder{
  width: 60px;
  height: 60px;
  border: 1px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.wrapper:hover .forFakeBorder{
  animation-name: fakeborder;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-delay: 1s; 
}

собственно кнопочка это див с классом outer рядом с ней я расположил див блок для того, чтобы он просто выполнял функцию фэйка ( оба перечисленных элемента позиционированны абсолютно относительно родительского блока wrapper , ), при :hover родительского блока должна срабатывать анимация, НО она работает очень странно, неведомой мне причине, анимация съезжает почему-то куда-то вниз и вправо ? Почему так, и как сделать , чтобы этот forFakeBorder работал?

Answer 1

[Роман Дворянов]

UPD: Исправлено

@keyframes fakeborder{
  from{
    border: none;
    transform: scale(1) translate(-50%, -50%);
  }to{
    border: 3px solid green;
    transform: scale(1.5) translate(-50%, -50%);
  }
}

.forFakeBorder {
  transform-origin: left top;
}

Comments

[Muranx]

Роман Дворянов, спасибо!

[Роман Дворянов]

Muranx, Пожалуйста :)

[Muranx]

Роман Дворянов, хм, либо я чот не соображаю либо хз. . . сейчас добавил данное свойство в стили .forFakeBorder как было так и есть . . Причем в двух местах попробовал. браузер хром, хз почему не получается

[Роман Дворянов]

Muranx, добавьте пример на кодпен или какую-нибудь другую песочницу, будет удобней решать проблему коллективным способом

[Muranx]

Роман Дворянов, вот

[Роман Дворянов]

Muranx, А я понял, короче в вашей анимации используется сокращенное свойство transform, которое перезаписывает свойство transform у вашего псевдо бордера, поэтому его transform становится translate(0, 0) в момент анимации.
Как вариант использовать

@keyframes fakeborder{
  from{
    border: none;
    transform: scale(1) translate(-50%, -50%);
  }to{
    border: 3px solid green;
    transform: scale(1.5) translate(-50%, -50%);
  }
}

Но тогда, ваш ховер будет чуть ближе к центру, но все равно с поправкой на центр от радиуса элемента с эффектом scale.

А вот если увеличивать не scale-ом, а падингом... например

[Muranx]

Роман Дворянов, муть какая-то, казалось бы задача простейшая, и scale( ) тут наверное самый очевидный вариант, и он работает с какими-то поправками . . . Хха, только-что загрузил ваш первый пример, дичь какая-то , вы же сами видите ! :D ХАха, а теперь второй загрузил, рановато я нажал "Назначить ответом" :D

[Muranx]

Роман Дворянов, или вы мне просто ссылки не те дали

[Роман Дворянов]

Muranx, посмотрел свою, такая же как ваша, пробуйте эту))

[Muranx]

Роман Дворянов, на самом деле стараюсь уйти от решений с прописыванием чётких цифр, допустим придёт мне в голову изменить этот .fakeBorder придется тогда и padding менять в анимации. . . так-себе решение, надеюсь ты это понимаешь

[Роман Дворянов]

Muranx,
Тогда нужно понимать, что твой фейковый элемент позиционируется посередине внезависимости от scale, рассчитывается его реальный размер контейнера (scale не увеличивает физически элементы, а выносит их на новый слой), соответственно, чтоб сделать это со scale в конкретном примере, тебе придется на глаз подобрать отступы, тоже ничего универсального в этом нет.

На скрине можно увидеть, что увеличенный бордер находится в том же положении, что и был, только увеличен... и тогда я задумался почему не работает transform-origin, попробовал left top и... сработало

Ну и не забываем дублировать свойства в сокращенных записях, если не хотим их потерять

@keyframes fakeborder{
  from{
    border: none;
    transform: scale(1) translate(-50%, -50%);
  }to{
    border: 3px solid green;
    transform: scale(1.5) translate(-50%, -50%);
  }
}

[Роман Дворянов]

Muranx, а transform-origin left top сработал потому что вы позиционируете элемент по top и left

[Muranx]

Роман Дворянов, ну вот left top вот это уже норм вариант ! Если честно пока не врубился про ваше объяснения слоёв, но работает норм, и даже при увеличении фейка работать тоже будет. . . Пока я не пробовал, но походу display:flex с justify-content: center; align-items: center походу будут работать норм!

[Роман Дворянов]

Поправил ответ