Я делаю страницу входа и выхода с заставкой, но заставка работает нормально на странице загрузки. Я не использовал jquery / javascript. Я создал с заставкой в анимации css3, когда я нажал кнопку выхода, то же самое повторилось снова всплескщелкнул экран при выходе из системы. Мне не нужен экран-заставка при нажатии кнопки выхода из системы. Я хочу только загрузить начальную страницу страницы, после чего я хочу удалить экран-заставку при выходе из системы. Однако повторяется та же анимация при выходе из системы. Как я могу удалить ее?выйти нажмите?я пытался .hide (), удалить (), но он не работает, пожалуйста, помогите мне .. как я могу сделать код при загрузке и выходе?
Css3 анимация
/* SPLASH SCREEN * -------------------------- */
#splash {
background-color: #fc9204 !important;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
z-index: 10;
transition-property: top;
-webkit-animation: slide-out-fwd-center 7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-out-fwd-center 7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-out-fwd-center {
0% {
-webkit-transform: translateZ(1);
transform: translateZ(1);
opacity: 1;
}
100% {
-webkit-transform: translateZ(600px);
transform: translateZ(600px);
opacity: 0;
}
}
@keyframes slide-out-fwd-center {
0% {
-webkit-transform: translateZ(1);
transform: translateZ(1);
opacity: 1;
}
100% {
-webkit-transform: translateZ(600px);
transform: translateZ(600px);
opacity: 0;
}
}
#splash img {
display: block;
margin: 200px auto;
width: 100px;
height: 200px;
-webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-fwd-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
-webkit-transform: translateZ(160px);
transform: translateZ(160px);
}
}
@keyframes slide-fwd-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
-webkit-transform: translateZ(160px);
transform: translateZ(160px);
}
}