im trying crossfade between 3 images, using css.
im new @keyframes, im having trouble make work.
below, html , css code snippets:
index.html:
<!doctype html> <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="cf"> <img class="bottom" src="assets/1.png" /> <img class="top" src="assets/2.png" /> <img class="bottom" src="assets/3.png"> </div> </body> </html> style.css:
#cf { position: relative; height: auto; width: auto; margin: 0 auto; } #cf img { position: absolute; left: 0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img { animation-name: cf3fadeinout; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 6s; animation-direction: alternate; } #cf img:nth-of-type(1) { animation-delay: 4s; } #cf img:nth-of-type(2) { animation-delay: 2s; } #cf img:nth-of-type(3) { animation-delay: 0; } @keyframes cf3fadeinout { 0% { opacity: 1; } 17% { opacity: 1; } 25% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } } right now, animation acting weird, flashing 1 image another, @ random animation times.
you close correct solution. animation-direction: alternate; causes animation "run backwards" once reached 100%. odd times defined in keyframe, leads uneven transitions:
keyframe 0% 17% 25% 92% 100% 92% 25% 17% 0% 17% ... infinite state :1 1 0 0 1 0 0 1 1 1 time in state : 17% 62% 0% 62% 34% transition time: 8% 8% 8% 8% simplify keyframe times , should fine. time distribution don't need animation-direction @ all. can adjust times changing animation-duration of keyframe , animation-delay images.
#cf img { animation-name: cf3fadeinout; animation-timing-function: ease-in-out; /* if want cycle finite amount of times, change 'infinite' # of iterations need */ animation-iteration-count: infinite; animation-duration: 6s; animation-direction: alternate; /* not strictly necessary */ position:absolute; } #cf img:nth-of-type(1) { animation-delay: 5s; } #cf img:nth-of-type(2) { animation-delay: 3s; } #cf img:nth-of-type(3) { /* add delay first picture */ animation-delay: 1s; } @keyframes cf3fadeinout { /* distributing times evenly */ 0% { opacity: 1; } 25% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } }<div id="cf"> <img class="bottom" src="http://lorempixel.com/200/100/sports/1" /> <img class="top" src="http://lorempixel.com/200/100/sports/2" /> <img class="bottom" src="http://lorempixel.com/200/100/sports/3"> </div>strictly spoken, first 2 transitions marginally different since transition picture of opacity:1 instead of fading picture , have different times, difference barely visible , imo not worth effort compared resulting complication in code.
Comments
Post a Comment