0
我想要一個平滑的css3滑塊，它具有.png圖像。在開始之後，所有圖像都會顯示一次，然後工作正常。我需要幫助來隱藏轉換開始時加載的三張圖像。Css3淡入淡出轉換沒有JavaScript/jQuery使用.png圖像
如果有人能幫助...會很高興。
PS：我正在研究一些限制使用jquery/javascript的工具。由此，我的問題的許多解決方案都無法實現。
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:571px;
width:931px;
margin:0 auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 24s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 24s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 24s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 24s;
}
#cf4a img:nth-of-type(4) {
\t
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
animation-delay: 18s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
visibility: visible;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}<div id="cf4a" class="shadow">
<img src="header-img-1.png" />
<img src="header-img-2.png" />
<img src="header-img-3.png" />
<img src="header-img-4.png" />
</div>
歡迎StackOverflow上。一些提示/問題：你在此之前詢問過其他地方嗎？這個問題之前問stackoverflow？ [Simular question]（http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load）。以下是提出一個很好的問題的指導：[鏈接]（http://stackoverflow.com/help/how-to-ask） – Persijn
@Persijn ...我搜查了.....但它與我無關問題。感謝回覆。 –
我想幫忙，但你的問題沒有明確要求。你是什麼意思：「我需要幫助來隱藏轉換開始時加載的三張圖片」？你能詳細解釋一下你的意思嗎？顯示時你想隱藏圖像嗎？您想在頁面加載後隱藏圖像嗎？ – Persijn