Shake Effect using CSS

Question

HTML Code 

<span class="pulse"></span>

 

CSS Code 

.shake {

display: block;

position: fixed;

color: rgb(255, 255, 255);

font-family: proxima-nova, Arial, sans-serif;

font-size: 16px;

cursor: pointer;

padding: 10px;

z-index: 100000001;

bottom: -12px;

right: 50px;

border-radius: 10px;

-webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .15);

box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .15);

margin-bottom: 26px;

animation: shake 2s cubic-bezier(.36, .07, .19, .97) both;

background:url() no-repeat;

width:100px;

height:18px;

background-size:contain;

}

.shake:hover {

animation: none;

}

@-webkit-keyframes shake {

10%,

90% {

transform: translate3d(-1px, 0, 0);

}

20%,

80% {

transform: translate3d(2px, 0, 0);

}

30%,

50%,

70% {

transform: translate3d(-4px, 0, 0);

}

40%,

60% {

transform: translate3d(4px, 0, 0);

}

}

@keyframes shake {

10%,

90% {

transform: translate3d(-1px, 0, 0);

}

20%,

80% {

transform: translate3d(2px, 0, 0);

}

30%,

50%,

70% {

transform: translate3d(-4px, 0, 0);

}

40%,

60% {

transform: translate3d(4px, 0, 0);

}

}

 

 

 

Sample Implementation 

https://codepen.io/anon/pen/vPoPER