CSS анимация после :target
Здравствуйте, дорогие форумчане!
Прошу помощи, не знаю как поступить..
Ситуация следующая:
При клике на ссылку с якорем (например #box) у меня показывается блок (#box) с анимацией на CSS, но как только я "скрываю его" (другая ссылка с пустым якорем) анимация не успевает воспроизводиться (ибо display:none;), как поступить в данной ситуации? Что бы и скрыть блок и анимацию бы отработать.. На чистом CSS хотелось бы решить проблему. Буду рад любой помощи.
Код:
#box{
position: fixed;
width:100%;
height:100%;
background: rgba(20, 20, 20, .75);
z-index: 999;
/* вот ее бы запускать */
-webkit-animation: moveToLeftFade .5s ease both;
-moz-animation: moveToLeftFade .5s ease both;
animation: moveToLeftFade .5s ease both;
display: none;
}
#box:target {
display: block;
-webkit-animation: moveFromLeftFade .5s ease both;
-moz-animation: moveFromLeftFade .5s ease both;
animation: moveFromLeftFade .5s ease both;
}
@-webkit-keyframes moveFromLeftFade {
from { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeftFade {
from { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeftFade {
from { opacity: 0.3; transform: translateX(-100%); }
}
@-webkit-keyframes moveToLeftFade {
to { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeftFade {
to { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveToLeftFade {
to { opacity: 0.3; transform: translateX(-100%); }
}
Пробовал следующим образом: изначально убираю display:none, и вроде бы все O'K, но при рефреше страницы проигрывает анимация "скрывания", но дальнейшая работа просто идеальна: работает обе анимации |