@MeMoJlor

Почему не работает animation-delay?

Добрый день, есть секция, у которой есть класс активности. Когда класс активности убирается, должна срабатывать анимация с задержкой, но задержки нет. В чем может быть причина?
section{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		transition-delay: 0.3s;
		transition: backdrop-filter 0.5s;
		animation: menu 0.1s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	.blur{
		backdrop-filter:  blur(5px) brightness(60%);
		animation: menu 0.1s;
		animation-direction: reverse;
		animation-fill-mode: forwards;
	}
	@keyframes menu {
		0%{transform: translateX(0);}
		100%{transform: translateX(-101%);}
	}
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Steppp
попробуй так
section{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    transition-delay: 0.3s;
    transition: backdrop-filter 0.5s;
    animation-name: menu;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .blur{
    position: fixed;
    backdrop-filter:  blur(5px) brightness(60%);
    animation-name: menu;
    animation-duration: 1s;
    animation-direction: reverse;
    animation-fill-mode: forwards;
  }
  @keyframes menu {
    0%{transform: translateX(0);}
    100%{transform: translateX(-101%);}
  }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы