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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -