css3 - CSS Animation Fade In Slide Down -
i'm trying recreate flash animation html/css got stuck.
this actual animation, first image dark background fades in, next image slide down
http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/
here's got far... how can add second image slide down?
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 , chrome */ -o-transition: opacity 3s; transition: opacity 3s;
}
i created rough version can work uses css3 animations along 2 javascript functions add/remove animation classes. check out here
this perform better javascript/jquery version.
also, recommend making slide down elements div
s opposed img
s can have content within buttons added.
here relevant code
<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 = ''; }
edited add browser prefixes
edited again because apparently safari doesn't pixels , percents mixed
Comments
Post a Comment