Как сделать так, чтобы анимация распространялась из центра? - PullRequest
Новая
       11

Как сделать так, чтобы анимация распространялась из центра?

0 голосов
/ 09 февраля 2019

Я создал анимацию таких косо движущихся точек в горошек. 

div {
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 100px 100px;
}

@keyframes animation1 {
  from {
    background-position: 0 0, 50px 0, 25px 50px, 75px 50px;
  }
  to {
    background-position: -100px -100px, -50px -100px, -75px -50px, -25px -50px;
  }
}
<div></div>

Я бы хотел изменить это на анимацию, в которой каждая точка в горошек выходит из центра экрана.

Однако, посколькуbackground-image свойство не Animatable, я не знаю, как его реализовать.

Как я могу это реализовать?

1 Ответ

0 голосов
/ 10 февраля 2019

Вы можете анимировать background-size и / или background-position для получения необходимого эффекта: 

body {
  margin:0;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 20px 20px;
  background-position: 50% calc(50% + 20px), calc(50% - 20px) 50%, calc(50% + 20px) 50%, 50% calc(50% - 20px);
}

@keyframes animation1 {
  from {
    background-size: 20px 20px;
    background-position: calc(50% - 10px) calc(50% + 20px), calc(50% - 20px) calc(50% + 10px), calc(50% + 20px) calc(50% - 10px), calc(50% + 10px) calc(50% - 20px);
  }
  to {
    background-size: 300px 300px;
    background-position: calc(50% - 10px) calc(50% + 100px), calc(50% - 100px) calc(50% + 10px), calc(50% + 100px) calc(50% - 10px), calc(50% + 10px) calc(50% - 100px);
  }
}
...