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 而不是 img，这样您就可以在其中包含内容，就像我添加的按钮一样。

这里是相关代码

<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 不喜欢混合像素和百分比