Пульсирующая анимация CSS. Устранить дефект с толщиной

@novichek_1905 · Регистрация: 16.02.2018

Author24 — интернет-сервис помощи студентам

Всем привет! Написал неплохую анимацию, но обнаружился дефект, от которого не знаю как избавиться. У меня пульсирующие кольца сделаны border: 1px solid red; но когда кольцо увеличивается, то и значение border уже не 1px а гораздо больше. Вопрос, как сделать так, что бы при трансформации не менялся размер border.

PHP/HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    .point-item{
      font-size: 10px;
      margin: 100px;
    }
    
    .item, .point-item{
      border-radius: 50%;
    }
    
    .point-item{
      width: 4em;
      height: 4em;
      background-color: red;
      position: relative;
    }
    
    .circle-item{
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: .5;
    }
    
    .point-item:hover{
      animation-play-state: paused;
    }
    
    .item-1{
      animation: scale-1 2s linear infinite;
    }
    .item-2{
      animation: scale-1 2s linear infinite;
      animation-delay: .66s;
    }
    .item-3{
      animation: scale-1 2s linear infinite;
      animation-delay: 1.32s;
    }
    .item-4{
      animation: scale-1 2s linear infinite;
      animation-delay: 1.98s;
    }
    
    @keyframes scale-1{
      form{
        transform: scale(1);
      }
      to{
        transform: scale(5);
        opacity: 0;
      }
    }
  
   
  </style>
</head>
<body>
  <div class="point-item">
    <div class="item circle-item item-1"></div>
    <div class="item circle-item item-2"></div>
    <div class="item circle-item item-3"></div>
    <div class="item circle-item item-4"></div>
  </div>
</body>
</html>

@SiarheiSiarhei · 07.06.2018, 19:57

Сообщение от novichek_1905

то и значение border уже не 1px а гораздо больше.

сам, того востребовал... от новичка-газка-верно..

Сообщение от novichek_1905

to{ transform: scale(5); opacity: 0; }

@novichek_1905 · 08.06.2018, 11:14 **[ТС]**

Сообщение от SiarheiSiarhei

сам, того востребовал... от новичка-газка-верно..

Фигню написал.

Сообщение от SiarheiSiarhei

to{ transform: scale(5); opacity: 0; }

Я об этом же, как сделать по-другому пульсацию с сохранением размеров border? Только по существу.

@AlexZaw · 08.06.2018, 12:02

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

@novichek_1905 · 08.06.2018, 12:15 **[ТС]**

AlexZaw, благодарю, но эти свойства не лучшие для аминирования, и будут провоцировать лаги. Возможно есть ещё варианты сделать с помощью transform?

@AlexZaw · 08.06.2018, 12:55

Сообщение от novichek_1905

Возможно есть ещё варианты сделать с помощью transform?

Удачи в поисках.
Возможно svg вам поможет, но вряд-ли

@novichek_1905 · 08.06.2018, 14:54 **[ТС]**

никто не сталкивался с таким?

@AlexZaw · 08.06.2018, 16:58

Сообщение от novichek_1905

никто не сталкивался с таким?

С каким с таким? Вполне логичное поведение, вы в 5 раз увеливаете масштаб элемента, соответственно border тоже увеличивается в 5 раз. Как это решить я вам ответил выше, дальше дело за вами.

@novichek_1905 · 08.06.2018, 17:31 **[ТС]**

AlexZaw

Сообщение от AlexZaw

Как это решить я вам ответил выше, дальше дело за вами.

Ответили, потому не понимаю смысл последнего сообщения.

Я конечно допускаю, что нет других вариантов, кроме как анимировать свойства width и height и провоцировать попиксельный рендеринг, но хочу изучить вопрос детальней, возможно кто-то решал подобную задачу, возможно с помощью js или как вы выше писали SVG...

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	07.06.2018, 19:57	2
	Сообщение от novichek_1905 то и значение border уже не 1px а гораздо больше. сам, того востребовал... от новичка-газка-верно.. Сообщение от novichek_1905 to{ transform: scale(5); opacity: 0; } 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	08.06.2018, 11:14 [ТС]	3
	Сообщение от SiarheiSiarhei сам, того востребовал... от новичка-газка-верно.. Фигню написал. Сообщение от SiarheiSiarhei to{ transform: scale(5); opacity: 0; } Я об этом же, как сделать по-другому пульсацию с сохранением размеров border? Только по существу. 0

@AlexZaw Модератор 2289 / 1667 / 653 Регистрация: 07.08.2016 Сообщений: 3,983
	08.06.2018, 12:02	4
	Очевидно что нужно не менять масштаб элемента, а просто увеличивать его ширину и высоту. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	08.06.2018, 12:15 [ТС]	5
	AlexZaw, благодарю, но эти свойства не лучшие для аминирования, и будут провоцировать лаги. Возможно есть ещё варианты сделать с помощью transform? 0

@AlexZaw Модератор 2289 / 1667 / 653 Регистрация: 07.08.2016 Сообщений: 3,983
	08.06.2018, 12:55	6
	Сообщение от novichek_1905 Возможно есть ещё варианты сделать с помощью transform? Удачи в поисках. Возможно svg вам поможет, но вряд-ли 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	08.06.2018, 14:54 [ТС]	7
	никто не сталкивался с таким? 0

@AlexZaw Модератор 2289 / 1667 / 653 Регистрация: 07.08.2016 Сообщений: 3,983
	08.06.2018, 16:58	8
	Сообщение от novichek_1905 никто не сталкивался с таким? С каким с таким? Вполне логичное поведение, вы в 5 раз увеливаете масштаб элемента, соответственно border тоже увеличивается в 5 раз. Как это решить я вам ответил выше, дальше дело за вами. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	08.06.2018, 17:31 [ТС]	9
	AlexZaw Сообщение от AlexZaw Как это решить я вам ответил выше, дальше дело за вами. Ответили, потому не понимаю смысл последнего сообщения. Я конечно допускаю, что нет других вариантов, кроме как анимировать свойства `width` и `height` и провоцировать попиксельный рендеринг, но хочу изучить вопрос детальней, возможно кто-то решал подобную задачу, возможно с помощью js или как вы выше писали SVG... 0