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

Popular posts from this blog

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

Image
recently have uploaded wordpress site onto server. have uploaded wordpress site in sub-folder under root folder ../root(domain root folder)/wordpress (where host wordpress folder). now problem content data in page or post in dashboard of wordpress admin panel not showing - see image. but data showing in front view - see image. if not browser cache issue , not issue happened tinymce editor during upgrade; try add config file: define('concatenate_scripts', false);
Read more

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

i trying ip address of vm , trying use establish ssh vm. following script: --- - hosts: localhost become: yes connection: local gather_facts: false serial: 1 vars_files: - createvmvars.yml tasks: - name: gathering vm info. vsphere_guest: vcenter_hostname: "{{vcenter_hostname}}" username: "{{vcenter_username}}" password: "{{vcenter_password}}" guest: "{{guest_name}}" vmware_guest_facts: yes register: var - debug: msg="{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" - name: establishing ssh connection. script: /home/shasha/devops/scripts/ssh_configure.sh "{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" following content of ssh_configure.sh : #!/bin/sh ssh-keygen -t rsa ssh-copy-id $1 but when running playbook, getting following error while executing third task: error! 'var' undefined but debug module(second task) printin
Read more

javascript - Get parameter of GET request -

i make request: createxhrrequest( "get", fileurl, function( err, response ) { if( err ) { alert( "error get!" ); } alert(response); }); and full response: { "status" : "ok", "message" : "jvberi0xljqkjdduxdgkmy how can jvberi0xlj ? i try response.message , response["message"]. nothing works. just simple access this: var json = json.parse(response); json.message
Read more