<div class="container"> <img src="https://images.unsplash.com/photo-1432059964050-d4eba2ef368a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c1dbc3d58047ce558b7820745a072b26"> <div class="two"> <h1>I <span> ♥ </span> code</h1> </div> </div>
.container { width: 100%; height: 100%; .two { width: 90%; height: 90%; top:5%; left:5%; position: absolute; border: 2px solid #dcdcdc; display: flex; align-items: center; justify-content: center; h1 { color: #fff; font-size: 4em; position: relative; span { color: #e00079; display:inline-block; } } } } img { position: fixed; width: 100%; top:0; left:0; } //Animation .scaledIt { -webkit-animation: scaleUp 1s infinite; -moz-animation: scaleUp 1s infinite; -o-animation: scaleUp 1s infinite; animation: scaleUp 1s infinite; } @-webkit-keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } } @-moz-keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } } @-o-keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } } @keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } }
$('span').addClass('scaledIt');