Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Hello !
- I'm trying to make a website for a school project, and I would like to add some animations made with CSS.
- I found this code on internet :
- ----------------------------------
- CSS
- #crossfade > img
- {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0px;
- left: 0px;
- color: transparent;
- opacity: 0;
- z-index: 0;
- -webkit-backface-visibility: hidden;
- -webkit-animation: imageAnimation 30s linear infinite 0s;
- -moz-animation: imageAnimation 30s linear infinite 0s;
- -o-animation: imageAnimation 30s linear infinite 0s;
- -ms-animation: imageAnimation 30s linear infinite 0s;
- animation: imageAnimation 30s linear infinite 0s;
- }
- #crossfade > img:nth-child(2)
- {
- -webkit-animation-delay: 6s;
- -moz-animation-delay: 6s;
- -o-animation-delay: 6s;
- -ms-animation-delay: 6s;
- animation-delay: 6s;
- }
- #crossfade > img:nth-child(3)
- {
- -webkit-animation-delay: 12s;
- -moz-animation-delay: 12s;
- -o-animation-delay: 12s;
- -ms-animation-delay: 12s;
- animation-delay: 12s;
- }
- #crossfade > img:nth-child(4)
- {
- -webkit-animation-delay: 18s;
- -moz-animation-delay: 18s;
- -o-animation-delay: 18s;
- -ms-animation-delay: 18s;
- animation-delay: 18s;
- }
- #crossfade > img:nth-child(5)
- {
- -webkit-animation-delay: 24s;
- -moz-animation-delay: 24s;
- -o-animation-delay: 24s;
- -ms-animation-delay: 24s;
- animation-delay: 24s;
- }
- @-webkit-keyframes imageAnimation
- {
- 0% { opacity: 0; -webkit-animation-timing-function: ease-in; }
- 8% { opacity: 1; -webkit-animation-timing-function: ease-out; }
- 17% { opacity: 1 }
- 25% { opacity: 0 }
- 100% { opacity: 0 }
- }
- @-moz-keyframes imageAnimation
- {
- 0% { opacity: 0; -moz-animation-timing-function: ease-in; }
- 8% { opacity: 1; -moz-animation-timing-function: ease-out; }
- 17% { opacity: 1 }
- 25% { opacity: 0 }
- 100% { opacity: 0 }
- }
- @-o-keyframes imageAnimation
- {
- 0% { opacity: 0; -o-animation-timing-function: ease-in; }
- 8% { opacity: 1; -o-animation-timing-function: ease-out; }
- 17% { opacity: 1 }
- 25% { opacity: 0 }
- 100% { opacity: 0 }
- }
- @-ms-keyframes imageAnimation
- {
- 0% { opacity: 0; -ms-animation-timing-function: ease-in; }
- 8% { opacity: 1; -ms-animation-timing-function: ease-out; }
- 17% { opacity: 1 }
- 25% { opacity: 0 }
- 100% { opacity: 0 }
- }
- @keyframes imageAnimation
- {
- 0% { opacity: 0; animation-timing-function: ease-in; }
- 8% { opacity: 1; animation-timing-function: ease-out; }
- 17% { opacity: 1 }
- 25% { opacity: 0 }
- 100% { opacity: 0 }
- }
- ----------------------------------
- HTML
- <div id="crossfade">
- <img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="Image 1">
- <img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" alt="Image 2">
- <img src="http://farm6.staticflickr.com/5263/5601183065_f88a48d599.jpg" alt="Image 3">
- <img src="http://farm2.staticflickr.com/1415/983021323_8eb2f92c01.jpg" alt="Image 1">
- <img src="http://farm1.staticflickr.com/168/397834706_6a46c6ada5.jpg" alt="Image 1">
- </div>
- ----------------------------------
- It works, but we can see the background between two images.
- What I want is the exact same effect, but without the background.
- I tried to modify 25% { opacity: 0 } to 25% { opacity: 1 }, and it worked, but, after a cycle, it stopped to work.
- Thanks for reading !
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement