Сразу
Пример
при нажатии кнопки хочется, чтобы "окружность" наезжала на основной контент. Возможно ли это?
И да, почему то анимация сейчас вообще не срабатывает
.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%);
}
}
Где я ошибся?
