CSS動畫淡入淡出

Question

我想重新創建這個Flash動畫到HTML/CSS，但我被卡住了。

這是實際的動畫，深色第一圖像背景中消失，那麼接下來的圖像將下滑

http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/

這是我走到這一步，我......怎麼可以添加第二圖像滑落？

http://jsfiddle.net/tetonline/QZNut/2/

HTML

<img onload="this.style.opacity='1';" src="https://tchuatocolearner.eppi.com/temp/graphinglab/images/blur.png" /> 

CSS

img { 
opacity:0; 
-moz-transition: opacity 3s; 
/* Firefox 4 */ 
-webkit-transition: opacity 3s; 
/* Safari and Chrome */ 
-o-transition: opacity 3s; 
transition: opacity 3s; 

}

Answer 1

我創建了一個粗略的版本，您可以與工作使用CSS3動畫與簡單的兩個JavaScript函數一起添加/刪除動畫類。 Check it out here

這將比完全的javascript/jQuery版本表現更好。

此外，我建議製作向下滑動元素div s而不是img s，以便您可以在其中添加內容，就像我添加的按鈕一樣。

下面是相關代碼

<div id='firstDiv' class='overlay moveDown'> 
    <button onclick='firstAction()'></button> 
</div> 
<div id='secondDiv' class='overlay'> 
    <button onclick='secondAction()'></button> 
</div> 
<div id='content' class='fadeMe'>...Content...</div> 

// CSS 
.overlay { 
    position:absolute; 
    left:50%; 
    top:-500px; 
    margin-top:-200px; 
    margin-left:-250px; 
    width:500px; 
    height:400px; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    z-index:3; 
} 
@keyframes movedown { 
    0% { 
     top:-100%; 
    } 
    100% { 
     top:50%; 
    } 
} 
@-webkit-keyframes movedown { 
    0% { 
     top:-100%; 
    } 
    100% { 
     top:50%; 
    } 
} 
@-moz-keyframes movedown { 
    0% { 
     top:-100%; 
    } 
    100% { 
     top:50%; 
    } 
} 
@-ms-keyframes movedown { 
    0% { 
     top:-100%; 
    } 
    100% { 
     top:50%; 
    } 
} 
@-o-keyframes movedown { 
    0% { 
     top:-100%; 
    } 
    100% { 
     top:50%; 
    } 
} 

@keyframes moveup { 
    0% { 
     top:50%; 
    } 
    100% { 
     top:-100%; 
    } 
} 
@-webkit-keyframes moveup { 
    0% { 
     top:50%; 
    } 
    100% { 
     top:-100%; 
    } 
} 
@-moz-keyframes moveup { 
    0% { 
     top:50%; 
    } 
    100% { 
     top:-100%; 
    } 
} 
@-ms-keyframes moveup { 
    0% { 
     top:50%; 
    } 
    100% { 
     top:-100%; 
    } 
} 
@-o-keyframes moveup { 
    0% { 
     top:50%; 
    } 
    100% { 
     top:-100%; 
    } 
} 
#firstDiv { 
    background-image: url(http://img2.timeinc.net/people/i/2013/pets/news/130304/kitten-3-600.jpg); 
} 
#secondDiv { 
    background-image: url(http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg); 
} 
.moveDown { 
    -webkit-animation: movedown 2s linear forwards; 
    -moz-animation: movedown 2s linear forwards; 
    -ms-animation: movedown 2s linear forwards; 
    -o-animation: movedown 2s linear forwards; 
    animation: movedown 2s linear forwards; 
    <!-- 
    animation-name:"movedown"; 
    animation-duration: 2s; 
    animation-timing-function: linear; 
    animation-fill-mode: forwards; 
    --> 
} 
.moveUp { 
    -webkit-animation: moveup 2s linear forwards; 
    -moz-animation: moveup 2s linear forwards; 
    -ms-animation: moveup 2s linear forwards; 
    -o-animation: moveup 2s linear forwards; 
    animation: moveup 2s linear forwards; 
    <!-- 
    animation-name:"moveup"; 
    animation-duration: 1s; 
    animation-timing-function: linear; 
    animation-fill-mode: forwards; 
    --> 
} 
#content { 
    padding:40px; 
    margin:0 auto; 
    width:75%; 
    height:75%; 
    opacity:1; 
    transition:2s opacity; 
} 
#content.fadeMe { 
    opacity:.4; 
    z-index:-1; 
} 

// Javascript 
function firstAction() { 
    var elem = document.getElementById('firstDiv'), 
     elemTwo = document.getElementById('secondDiv'); 
    elem.className = 'overlay moveUp'; 
    elemTwo.className = "overlay moveDown"; 
} 

function secondAction() { 
    var elem = document.getElementById('secondDiv'), 
     main = document.getElementById('content'); 
    elem.className = 'overlay moveUp'; 
    main.className = ''; 
} 

編輯補充瀏覽器再次前綴

編輯，因爲顯然Safari不喜歡混在你的jsfiddle需要