Почему не срабатывает анимация?

Question

[Skrolea]

Сразу Пример
при нажатии кнопки хочется, чтобы "окружность" наезжала на основной контент. Возможно ли это?
И да, почему то анимация сейчас вообще не срабатывает

.menu-wrapper {
  background:$primary-color;
 position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vw;
  z-index: 2;
   display:none;
  animation-name: circlefill;
  animation-duration: 1.1s;
  animation-fill-mode: forwards; 
}

@keyframes circlefill {
  0% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, #fff 0%, #fff 100%);
  }
  10% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 10%, #fff 10%, #fff 100%);
  }
  20% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 20%, #fff 20%, #fff 100%);
  }
  30% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 30%, #fff 30%, #fff 100%);
  }
  40% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 40%, #fff 40%, #fff 100%);
  }
  50% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 50%, #fff 50%, #fff 100%);
  }
  60% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 60%, #fff 60%, #fff 100%);
  }
  70% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 70%, #fff 70%, #fff 100%);
  }
  80% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 80%, #fff 80%, #fff 100%);
  }
  90% { 
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 90%, #fff 90%, #fff 100%);
  }
  100% {
    background-image: radial-gradient(at bottom right, $primary-color 0%, $primary-color 100%);
  }
}

Где я ошибся?

Answer 1

[Денис Букреев]

Градиенты можно задавать только свойству baсkground

Comments

[Skrolea]

Как так? htmlbook.ru/css3-na-primerakh/radialnyi-gradient

[Skrolea]

Да и вот рабочий пример codepen.io/TsarS/pen/ezvOWV

[Егор Живагин]

Skrolea: вот цитата с htmlbook - "Радиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient."
Вот из "рабочего примера" - "@keyframes circlefill {
0% {
background-image: radial-gradient(at top right, #ff4081 0%, #fff 0%, #fff 100%);
}"

Будьте внимательнее

Answer 2

[Максим Тимофеев]

Такие вещи лучше делать на svg:
www.jqueryscript.net/lightbox/Elastic-SVG-Modal-Wi...