html - Speed up CSS crossfade animation -
i have method crossfade images, it's way slow. time takes transition...but transition way slow , needs sped up. i've tried number of things no avail , , little explanation appreciated. note method due browser support. in advance!
#crossfade > img { position: absolute; min-height: 100%; min-width: 100%; width: auto; height: auto; max-width: none; max-height: none; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageanimation 75s linear infinite 0s; -moz-animation: imageanimation 75s linear infinite 0s; -o-animation: imageanimation 75s linear infinite 0s; -ms-animation: imageanimation 75s linear infinite 0s; animation: imageanimation 75s linear infinite 0s; } #crossfade > img:nth-child(2) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s;s } #crossfade > img:nth-child(3) { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } #crossfade > img:nth-child(4) { -webkit-animation-delay: 45s; -moz-animation-delay: 45s; -o-animation-delay: 45s; -ms-animation-delay: 45s; animation-delay: 45s; } #crossfade > img:nth-child(5) { -webkit-animation-delay: 60s; -moz-animation-delay: 60s; -o-animation-delay: 60s; -ms-animation-delay: 60s; animation-delay: 60s; } @-webkit-keyframes imageanimation { 0% { opacity: 0; -webkit-animation-timing-function: linear; } 5% { opacity: 1; -webkit-animation-timing-function: linear; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageanimation { 0% { opacity: 0; -moz-animation-timing-function: linear; } 5% { opacity: 1; -moz-animation-timing-function: linear; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageanimation { 0% { opacity: 0; -o-animation-timing-function: linear; } 5% { opacity: 1; -o-animation-timing-function: linear; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageanimation { 0% { opacity: 0; -ms-animation-timing-function: linear; } 5% { opacity: 1; -ms-animation-timing-function: linear; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageanimation { 0% { opacity: 0; animation-timing-function: linear; } 5% { opacity: 1; animation-timing-function: linear; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
fiddle included https://jsfiddle.net/joelssk/eoq5q8ne/
Comments
Post a Comment