html - CSS3 Banner Image Transition that repeats -
I'm working on a project and I have a banner. I want to change the banner from one image to another using the Season and repeat it after 10 seconds. I found a tutorial on how to do this, but it is still not working any help is appreciated!
HTML:
& lt; Div id = "cf3" & gt; & Lt; Img square = "down" src = "img / skyline.png" /> & Lt; Img class = "top" src = "img / kansas-skyline.png" /> & Lt; / Div & gt;
CSS:
# cf3 {padding-top: 25px; Status: Relative; Height: 275px; Width: 1100px; Margin: 0 px auto; } # Cf3 img {status: complete; -WebKit-Infection: Opacity 1 -S Ease-In-Out; -Mozy-infection: Opacity 1s ease-in-out; -O-Infection: Opacity 1s ease-in-out; Transition: Opacity 1s easily out; } @keyframe CF3 Fadeoin {0% {Opacity: 1; } 45% {Opacity: 1; } 55% {Opacity: 0; } 100% {Opacity: 0; }} # Cf3 img.top {animation-name: cf3FadeInOut; Animation-timing-function: low-in-out; Animation-repetition-count: infinity; Animation-period: 10s; Animation direction: optional;
designed to animation:
html < / P>
& lt; Div class = "cf3" & gt; & Lt; img class = "bottom" src = "https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg" / & gt; & Lt; Img class = "top" src = "http://placekitten.com/120/120" /> & Lt; / Div & gt;
css
. Cf3 {padding-top: 25px; Status: Relative; Height: 275px; Width: 500px; Margin: 0 px auto; Transition: All 2s ease; }. Cf3 img {status: complete; Width: 100%; Height: 100%; Webkit-Transition: All 10s Easy; -Move infection: all 10s easily; -O-Infection: All 10s Easy; Transition: All 10s Easy; } .top {-webkit- animation: css animation 10s infinite ease-in-out; -MOZ-Animation: CSS Animation 10S Infinite Low-In-Out; -o-animation: css animation 10s infinite low-in-out; } @ -webkit-keyframes css animation {{from opacity: 0; } {Opacity: 1; }}
Comments
Post a Comment