Element drop from behind a header

PPowerHouseK

New Member
I have a banner as a .png and I want it to descend from behind a header after a click. This is what i tried, but the div in this case comes back to its original position. I want it to be behind the header (hidden) and after the transition, to maintain its position:\[code\]<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s linear 2s;-webkit-animation:myfirst 5s linear 2s;}@keyframes myfirst{0% {background:red; left:0px; top:0px;}100% {background:green; left:0px; top:200px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0% {background:red; left:0px; top:0px;}100% {background:green; left:0px; top:200px;}}</style></head><body> <div></div> </body> </html>\[/code\]I also tried with jQuery's slideDown() but sadly since it's an image it doesn't look well enough.Thanks!
 
Back
Top