html - Cannot get an image in a keyframe to center horizontally -


i having huge headache image have. not center horizontally no matter do. have tried setting absolute , relative. setting left 50%, adding in transform: translate(-50%, -50%);, setting image display block margin on left , right auto.

what else can thing centered? whenever added transform: translate(-50%, -50%);, centered, keyframe rotate got out of wack , instead of hand waving in same position, hand moved down page.

the snippet not demonstrate doing.

.red {    background-color: #0085a1;    width: 100%;    height: 100vh;    position: relative;    text-align: center;  }    .hand {    width: auto;    height: auto;    position: absolute;    display: inline-block;    vertical-align: top;    text-align: center;    position: absolute;    /*transform: translate(0, -50%);*/    /*transform: translate(-50%, -50%);*/    top: 50%;    left: 50%;    margin-right: -50%;    -webkit-animation: wave 4s 1 normal forwards;    animation: wave 4s 1 normal forwards;  }    img.hand {    display: block;    margin-left: auto;    margin-right: auto;  }    @keyframes wave {    50% {      -ms-transform: rotate(75deg);      /* ie 9 */      -webkit-transform: rotate(75deg);      /* chrome, safari, opera */      transform: rotate(75deg);    }    90%,    100% {      opacity: 0    }  }
<div class="red">    <img class="hand" alt="hello">  </div>

add both translate() , rotate() @ same time.

jsfiddle

.red {    background-color: #0085a1;    width: 100%;    height: 100vh;    position: relative;  }  .hand {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%) rotate(0deg);    animation: wave 4s 1 normal forwards;  }  @keyframes wave {    50% {      transform: translate(-50%, -50%) rotate(75deg);    }    100% {      opacity: 0    }  }
<div class="red">    <img src="http://i.imgur.com/ywcrl0a.png" class="hand" alt="hello">  </div>


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