.online-chat-root .trigger-image {
-webkit-animation: swinging 3s ease-in-out 1s;
-moz-animation: swinging 3s ease-in-out 0s ;
animation: swinging 3s ease-in-out 0s ;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;


//  animation-name: bounce;
//        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);

}

@keyframes swinging {
0% { transform: rotate(0); }
5% { transform: rotate(5deg); }
25% { transform: rotate(-8deg); }

45% { transform: rotate(5deg); }
65% { transform: rotate(-8deg);
margin-left: -50px !important; }
85% { transform: rotate(5deg); 
}
100% { transform: rotate(0); 
margin-left: -200px !important;}
}

@-webkit-keyframes swinging {
0% { transform: rotate(0); }
5% { transform: rotate(5deg); }
25% { transform: rotate(-8deg); }

45% { transform: rotate(5deg); }
65% { transform: rotate(-8deg);
margin-left: -50px !important; }
85% { transform: rotate(5deg); 
}
100% { transform: rotate(0); 
margin-left: -200px !important;}
}

@-moz-keyframes swinging {
0% { transform: rotate(0); }
5% { transform: rotate(5deg); }
20% { transform: rotate(-8deg); }
35% { transform: rotate(5deg); }
40% { transform: rotate(-4deg); }
45% { transform: rotate(3deg); }
50% { transform: rotate(0); }
100% { transform: rotate(0); }
}

    @keyframes bounce {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-7px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
}