Растущий "взрыв" легкой анимации из центра страницы - PullRequest
Новая
       51

Растущий "взрыв" легкой анимации из центра страницы

0 голосов
/ 31 октября 2019

Используя CSS, я хотел бы анимировать круг с радиальным градиентом, чтобы расширить всю длину и ширину страницы (до полностью белого), а затем повернуть эту анимацию обратно (вернуться в исходное состояние). Это должно выглядеть как постепенный «всплеск» белого из центра и постепенно переходить в белый после достижения полной ширины / высоты, однако мой белый фон начинает переходить слишком рано. Как мне этого добиться?

scss 

    .container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      background: black;
      height: 100vh;
    }

    .flash-container {
        animation: grow 5s 2s linear forwards;
        width: 20px;
        height: 20px;
        z-index: 4;

        #flash {
            background: radial-gradient(circle, white, transparent 10%);
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 100%;
        }
    }

    @keyframes grow {
        to {
            transform: scale(1000);
            background: white;
        }
    }

html 

      <div class="container">
        <div class="flash-container">
          <div class="flash"></div>
        </div>
      </div>

Jsfiddle: https://jsfiddle.net/zv3bmw8j/2/

1 Ответ

1 голос
/ 31 октября 2019

Я обновил ваш CSS, чтобы использовать метод box-shadow, как я цитировал выше. Для этого потребуется больше настроек, так как он строится по методу наведения. Просто измените процентное значение от 0% до 100%, и вы должны быть твердыми. Я также внес изменения в формат HTML и удалил внутренний флеш div.

https://jsfiddle.net/q9n6adLp/

.flash-container {
    animation: grow 5s 2s linear forwards;
    width: 20px;
    height: 20px;
    z-index: 4;
  margin: 0 auto;
  box-shadow: 0 0 30vw 40vw rgba(241,244,0,1);
  .flash {
        background: radial-gradient(circle, white, transparent 10%);
    width: 100%;
    height: 100%;
        position: absolute;
        border-radius: 100%;
    }


}
...