/* Grow Rotate */ .hvr-grow-rotate { display: inline-block; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); vertical-align: middle; box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active { -webkit-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); } /* Buzz Out */ @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-buzz-out { display: inline-block; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); vertical-align: middle; box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active { -webkit-animation-name: hvr-buzz-out; animation-name: hvr-buzz-out; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @keyframes move { 0% { transform: translate(0, 50px); } 50% { transform: translate(20px, 100px); } 100% { transform: translate(0, 50px); } } @keyframes blink { 0% { top: 50px; left: 0; } 50% { top: 100px; left: 20px; } 100% { top: 50px; left: 0; } } @keyframes flicker { 0% { opacity: .9; } 30% { opacity: .97; } 40% { opacity: 1; } 80% { opacity: .9; } 88% { opacity: .98; } 90% { opacity: .94; } 93% { opacity: .9; } 95% { opacity: .99; } 96% { opacity: .93; } 98% { opacity: 1; } 99% { opacity: .93; } }