CODEWITHSUNDEEP
javascriptcssslideshowcss-animations
CnV
CnV

Reputation: 391

Slideshow with content animated in CSS

I have a slideshow with 3 images. For each of the image I have need to add some content on top of the image, and the text need to move from right to left, and gone in 3 secs. Then it will slide to the 2nd image, and again, I have to display the content from right to left again, this time with a background box at the back of the text.

How can I do this kind of animation in css? Moreover, this slider need to be compatible for all browsers.

Can anyone give me a hint?

Thanks in advance.

Upvotes: 0

Views: 306

Answers (1)

Maxwell
Maxwell

Reputation: 916

You can totally do that kind of animation with CSS, but you would have to use javascript to trigger the animations. The method you are talking about would not work for all browsers. If you can use jQuery for your projects, then you can use the animate feature. Plus it would be compatible for essentially all browsers that people use.

For the CSS approach, you would use the animation property, like this

@keyframes {
    from { color: #fff; } to { color: #000; }
}
@-webkit-keyframes {
    from { color: #fff; } to { color: #000; }
}
.myanimatedclass{
    animation: myanimation 2s ease-in;
    -webkit-animation: myanimation 2s ease-in;
}

For the jQuery approach, look up jQuery's animate feature. You will find all that you need. https://api.jquery.com/animate/

Upvotes: 0

Related Questions