translate transition animate - MOVE an object from one clicked position to a fixed location elsewhere

I have a "display:none;" DIV containing the word "Download" and a down-arrow. When a user clicks on a link to start the download, the DIV is then moved to that click location and displayed. At that point I apply a "classList" animation which references @keyframes. The color changes specified within the keyframes work. But, I tried to use "position:fixed; left:10px; bottom:30px;" and all that seems to be ignored.

I did read somewhere that positioning was not possible with keyframes. I hope that was from someone that has a wrong answer.

Animate image down infinite

what I want is to have an image arrow animate down infinitely, this is working, but I do not want to have it bounce back, I found css3 code, but the bounce back is the issue:

    @-moz-keyframes slide{
      0% {-moz-transform: translateY(-10px;);}
      90% {-moz-transform: translateY(5px);}
      100% {-moz-transform: translateY(-10px);}
   .slideshow img
        animation: slide 5s infinite;

Trying to get text to display on top of css3 animated clouds

I'm using CSS3 code that I found to display animated clouds on a blue sky. Works just fine.

I also want to display a headline on top of the "sky and clouds". This isn't working correctly. The clouds are on top of the headline.

I tried z-index but that didn't work and read that z-index might not work when web-transform is being used. But I couldn't find a solution.

So, what do I need to do to make sure that the headline is always on top of the "sky and clouds".



<div id="clouds">
<h2>Welcome To Gateway</h2>
	<div class="cloud x1"></div>

Syndicate content