CSS анимация-эффект набухания

Я пытаюсь создать CSS анимацию на стандартном символе ASCII (конкретно это: •). Я хочу, чтобы моя анимация была набухающим эффектом, как это . По какой-то причине персонаж просто перемещается слева направо. Он не разбухает и не возвращается к нормальному размеру, как вы можете видеть в этом Bootply .

Мой код выглядит следующим образом:

<div class="container">  
<div id="dot" class="dot">•</div>
  <button id="expandButton">push me</button>
</div>

.dot {
  font-size:3.0rem;
}

.dot-expand {
  color:green;
  animation: dot-expander 3.0s;
}

@keyframes dot-expander {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

Что я делаю не так? Мне все кажется правильным. Спасибо!

2 ответа

  1. Это не будет работать, потому что вы пытаетесь масштабировать текстовый элемент с помощью scale. Вместо этого используйте css для создания circle div.

    стиль CSS:

    .dot {
        border-radius: 50%;
        width: 25px;
        height: 25px; 
        background: rgb(0,0,0);
    }
    
    .dot-expand {
      background: rgb(0,255,0);
      animation: dot-expander 3.0s;
    }
    
    @keyframes dot-expander {
      from {
        transform: scale3d(1, 1, 1);
      }
    
      50% {
        transform: scale3d(1.05, 1.05, 1.05);
      }
    
      to {
        transform: scale3d(1, 1, 1);
      }
    }
    

    HTML:

    <div class="container">  
    <div id="dot" class="dot">•</div>
      <button id="expandButton">push me</button>
    </div>
    

    Яваскрипт:

    $('#expandButton').on('click', function() {
      alert('here');
      $('#dot').addClass('dot-expand');
    });
    

    Демо: http://www.bootply.com/9FwMTQQHoO

    Я бы рекомендовал вам увеличить количество шкалы, так как эффект очень тонкий. Вы также можете удалить .точка-развернуть класс после завершения анимации, так как в настоящее время анимацию можно воспроизвести только один раз. Чтобы анимация была воспроизведена снова без перезагрузки страницы, класс необходимо удалить и добавить снова при нажатии кнопки.

  2. Вы можете упростить анимацию CSS, просто используя scale, а не scale3D (тем более, что все 3 значения были одинаковыми — нет никакой пользы в использовании scale3D здесь)… кроме того, разница между шкалой 1 и шкалой 1.05 почти непонятна для зрителя, особенно если цикл занимает 3 секунды (по крайней мере, в данном случае, при размере элемента).

    Вот рабочий пример (я отредактировал время и масштабирование немного, чтобы это было более ясно показано.)

    $('#expandButton').on('click', function() {
      //toggleClass to turn off the animation on second button click.
      	$('#dot').toggleClass('dot-expand');
    	});
    * {margin: 20px; }
    
    .dot {
        border-radius: 50%;
        width: 5px;
        height: 5px; 
        background: rgb(0,0,0);
    	 display: block;
    }
    
    .dot-expand {
      animation: dot-expander 2s infinite; /* remove 'infinate' if you just want 1 cycle */
    }
    
    @keyframes dot-expander {
      0% {
        background: rgb(0,0,0);
        transform: scale(1);
      }
    
      50% {
      background: rgb(0,255,0);
        transform: scale(2.5);
      }
    
      100% {
        background: rgb(0,0,0);
        transform: scale(1);
      }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container">  
    <div id="dot" class="dot"></div>
      <button id="expandButton">push me</button>
    </div>