html - 执行动画后隐藏元素

Question

我有这个样本:

link

代码 HTML:

<div id="overlay-page">
    <div class="loader-logo">
        <div class="loader-img-container">
         <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
            <img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
        </div>
    </div>
</div>

代码 CSS:

@keyframes cf3FadeInOutTopLoader {
    0% {
        opacity:1;
        visibility: visible;
    }
    45% {
        opacity:1;
        visibility: visible;
    }
    55% {
        opacity:0;
        visibility: hidden;
    }
    100% {
        opacity:0;
        visibility: hidden;
    }
}
@keyframes cf3FadeInOutBottomLoader {
    0% {
        opacity:0;
        visibility: hidden;
    }
    45% {
        opacity:0;
        visibility: hidden;
    }
    55% {
        opacity:1;
        visibility: visible;
    }
    100% {
        opacity:1;
        visibility: visible;
    }
}
/* here your name of id was wrong */
#overlay-page img.top {
    animation-name: cf3FadeInOutTopLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img.bottom {
    animation-name: cf3FadeInOutBottomLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  width:200px;
}

这个动画的问题是我想运行一次并在动画结束后隐藏 ".top" 元素。

我该怎么做？基本上有两件事很重要:

1.只运行一次动画。

2.元素执行后隐藏

提前致谢!

Answer 1

这是CSS

@keyframes cf3FadeInOutTopLoader {
    0% {
        opacity:1;
        visibility: visible;
    }
    45% {
        opacity:1;
        visibility: visible;
    }
    55% {
        opacity:0;
        visibility: hidden;
    }
    100% {
        opacity:0;
        visibility: hidden;
    }
}
@keyframes cf3FadeInOutBottomLoader {
    0% {
        opacity:0;
        visibility: hidden;
    }
    45% {
        opacity:0;
        visibility: hidden;
    }
    55% {
        opacity:1;
        visibility: visible;
    }
    100% {
        opacity:1;
        visibility: visible;
    }
}

img.top {
    animation-name: cf3FadeInOutTopLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;
    visibility:hidden;

}
#overlay-page img.bottom {
    animation-name: cf3FadeInOutBottomLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  width:200px;
}