CSS - Масштаб анимации с границей радиуса - PullRequest
Новая
       49

CSS - Масштаб анимации с границей радиуса

0 голосов
/ 15 октября 2018

Я работаю над анимацией с масштабированием поля, и оно округляется до 8 пикселей.Ссылка: https://codepen.io/anon/pen/ePGxqy. Однако угол закругления странный, когда окно расширяется, и я не хочу масштабировать его, изменяя его ширину в ключевых кадрах.Как правильно масштабировать округлую рамку с закругленной границей? 

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    transform: scaleX(7.5) scaleY(0.46)
  }
  50% {
    transform: scaleX(1) scaleY(0.46)
  }
  100% {
    transform: scaleX(1) scaleY(1)
  }
}

@keyframes singleExpend {
  0% {
    transform: scaleX(1) scaleY(1)
  }
  50% {
    transform: scaleX(1) scaleY(0.46)
  }
  100% {
    transform: scaleX(7.5) scaleY(0.46)
  }
}
<div id="box"></div>

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Проблема с анимацией с помощью преобразования заключается в том, что вы растягиваете элемент.Таким образом, независимо от того, какой у вас установлен радиус границы, он также будет растягиваться вместе с шириной и высотой вашего элемента.ScaleX и ScaleY масштабируют ВЕСЬ элемент, а не только размеры.

Лучшее решение для анимации размера вашего элемента при согласованности радиуса границы - это анимация высоты и ширины.Примерно так будет работать: 

@keyframes singleExpend {
  0% {
    width: 55px;
    height: 55px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 400px;
    height: 40px;
  }
}

Удачи!

0 голосов
/ 15 октября 2018

Как правило, вам нужно анимировать радиус границы, чтобы он соответствовал масштабу вашего блока.

Для простоты, если радиус вашего блока равен 8px, и вы масштабируете свой блок в 8 раз, ваш радиус границы должен быть 1px вмасштабированный размер.Если размер вашей рамки равен 0,5, граница будет 16px;

В качестве альтернативы вы можете анимировать ширину и высоту рамки.Это будет уважать границы, и вам не придется менять их в этом случае.

Обновил вашу версию: 

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    transform: scaleX(8) scaleY(0.5);
    border-radius: 1px;
  }
  50% {
    transform: scaleX(1) scaleY(0.5)
    border-radius: 8px;
  }
  100% {
    transform: scaleX(1) scaleY(1)
    border-radius: 8px;
  }
}

@keyframes singleExpend {
  0% {
    transform: scaleX(1) scaleY(1)
    border-radius: 8px;
  }
  50% {
    transform: scaleX(1) scaleY(0.5)
    border-radius: 8px;
  }
  100% {
    transform: scaleX(8) scaleY(0.5)
    border-radius: 1px;
  }
}
<div id="box"></div>

Простая версия: 

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    width: 400px;
    height: 40px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 55px;
    height: 55px;
  }
}
@keyframes singleExpend {
  0% {
    width: 55px;
    height: 55px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 400px;
    height: 40px;
  }
}
<div id="box"></div>
...