.title.dna:hover span { animation: dnaText 4s infinite; } @keyframes dnaText { 0%, 100% { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } 50% { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg); } }
.title.push:hover span { animation: pushText .75s infinite; } @keyframes pushText { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(.75); -moz-transform: scale(.75); -ms-transform: scale(.75); -o-transform: scale(.75); transform: scale(.75); } }
.title.wave:hover span { animation: waveText .5s infinite; } @keyframes waveText { 0%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } }
.title.blink:hover span { animation: blinkText 1s infinite; } @keyframes blinkText { 0%, 100% { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(0deg); transform-style: preserve-3d; transform: rotateX(0deg); } 50% { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(90deg); transform-style: preserve-3d; transform: rotateX(90deg); } }
.title.collide:hover span { animation: collideText .5s infinite; } @keyframes collideText { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); } }
.title.skew:hover span { animation: skewText .75s linear infinite; } @keyframes skewText { 0%, 100% { -webkit-transform: skewY(35deg); -moz-transform: skewY(35deg); -ms-transform: skewY(35deg); -o-transform: skewY(35deg); transform: skewY(35deg); } 50% { -webkit-transform: skewY(-35deg); -moz-transform: skewY(-35deg); -ms-transform: skewY(-35deg); -o-transform: skewY(-35deg); transform: skewY(-35deg); } }
.title.boom span { margin: 0 5px; } .title.boom:hover span { animation: boomText .25s infinite; } @keyframes boomText { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); } }
.title.push-pull span { margin: 0 5px; } .title.push-pull:hover span { animation: pushPullText 1s linear infinite; } @keyframes pushPullText { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33.33% { -webkit-transform: scale(.3); -moz-transform: scale(.3); -ms-transform: scale(.3); -o-transform: scale(.3); transform: scale(.3); } 66.66% { -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); } }
.title.zap span { margin: 0 3px; } .title.zap:hover span { animation: zapText .25s infinite; } @keyframes zapText { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } 3% { opacity: 0; -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); } 100% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } }
.title.in-out span { margin: 0 3px; } .title.in-out:hover span { animation: inOutText 2.5s infinite; } @keyframes inOutText { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 50.1% { opacity: 1; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); } }
.title.out-in span { margin: 0 3px; } .title.out-in:hover span { animation: outInText 2.5s infinite; } @keyframes outInText { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); } 50.1% { opacity: 1; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } }
.title.fade-zoom span { margin: 0 5px; } .title.fade-zoom:hover span { animation: fadeZoomText 3s infinite; } @keyframes fadeZoomText { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } 5% { opacity: 0; -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); } }