CODEWITHSUNDEEP
htmlcsscss-animations
The AV
The AV

Reputation: 639

CSS3 Animation (keyframe Animation)

I want css3 animation with below requirement it would be great if someone share his/her experience

I have three images

image1.jpg: this will animate from bottom top, (image2.jpg, and image3.jpg should be hide)

image2.jpg:this will appear on stage once image1.jpg loaded ( image3.jpg should be hide)

image3.jpg: this is last image will appear after image2.jpg

Thanks for hepls

Upvotes: 0

Views: 498

Answers (2)

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Something like this? http://jsfiddle.net/2hSqz/3/

Here is an example of an animation:

 div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; }

@keyframes myfirst { from {background: red;} to {background: yellow;} }

And it would be a great to optimize it for every browser like in

Upvotes: 1

Visal Chhourm
Visal Chhourm

Reputation: 544

I don't understand what you want but I'm trying to help maybe you want like this.

<style>
            @keyframes move
            {
                from{top:100%}
                to{top:0}
            }
            @keyframes visible
            {
                from{opacity:0}
                to{opacity:1}
            }
            #img1{animation:move 5s; position:relative;}
            #img2{animation:visible both 3s; animation-delay:5s; opacity:0;}
            #img3{animation:visible both 3s; animation-delay:8s; opacity:0;}

        </style>

Hope it's what you want!

Upvotes: 1

Related Questions