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

Question

[MeMoJlor]

Добрый день, есть секция, у которой есть класс активности. Когда класс активности убирается, должна срабатывать анимация с задержкой, но задержки нет. В чем может быть причина?

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%);}
	}

Answer 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%);}
  }

Comments

[MeMoJlor]

не, не работает

[Steppp]

MeMoJlor, Былобы проще если бы код в кодпен залил)

может и это не работать translateX(0) - translateX(0,1%)