<div>
<p id="bounceTxt">Google</p>
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
div {
position: absolute;
top: 50%;
width: 100%;
}
p {
color: #265687;
font-family: "Montserrat Alternates", sans-serif;
font-size: 72px;
font-weight: 400;
letter-spacing: -0.05em;
text-align: center;
text-shadow: 3px 5px 5px rgba(0, 0, 0, .3);
em {
font-style: normal;
display: inline-block;
&:nth-child(1) {
color: #4285F4;
}
&:nth-child(2) {
color: #E94D3D;
}
&:nth-child(3) {
color:#F7C945;
}
&:nth-child(4) {
color: #4285F4;
}
&:nth-child(5) {
color: #34A853;
}
&:nth-child(6) {
color: #E94D3D;
}
&.bounce-me {
-webkit-animation: bounce 4s infinite ease-in-out;
animation: bounce 4s infinite ease-in-out;
}
}
}
@-webkit-keyframes bounce {
60% {
-webkit-transform: translate(0px, -200px) scale(1.2);
opacity: 0.8;
text-shadow: 0px 150px 20px rgba(0, 0, 0, 0.8);
}
}
@keyframes bounce {
60% {
-webkit-transform: translate(0px, -200px) scale(1.2);
opacity: 0.8;
text-shadow: 0px 150px 20px rgba(0, 0, 0, 0.8);
}
}
View Compiled
var
myText = document.getElementById("bounceTxt").innerHTML,
wrapText = "";
for (var i=0; i<myText.length; i++) {
wrapText += "<em>" + myText.charAt(i) + "</em>";
}
document.getElementById("bounceTxt").innerHTML = wrapText;
var
myLetters = document.getElementsByTagName("em"),
j = 0;
function applyBounce() {
setTimeout(function() {
myLetters[j].className = "bounce-me";
j++;
if (j < myLetters.length) {
applyBounce();
}
}, 250);
}
applyBounce();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.