Background Color Change Delay
HTML
<div class="header-content">
<h1>Welcome to <br>Wealth4Self</h1>
<h4 style="text-align: left;">Helping to accelerate and strengthen your financial<br>intelligence by providing you with knowledge and action<br>steps that you can implement into your life.</h4>
<h4 style="text-align: left;">Listen to The Wealth4Self Podcast on iTunes!</h4>
<div class="headbuttonPopup"><a href="#ninja-popup-254" class="snppopup-content" rel="254">Listen to the Podcast NOW! </a></div>
<div class="imgthing">
<img src="http://jasonlevoy.com/wp-content/uploads/2014/12/Jason-pointing-left.png" />
</div>
</div>
CSS
.imgthing img {
width:300px;
position:absolute;
top:110px;
left:250px;
animation:color-change3 0.3s infinite;
-webkit-animation:color-change3 0.3s infinite; /* Safari and Chrome */
}
.headbuttonPopup a {
font-size: 18px!important;
width: auto;
font-family: "Open Sans", Arial, sans-serif;
box-sizing: border-box;
padding: 17px 15px!important;
border-radius: 5px;
border: 2px solid rgba(201, 52, 52, 1);
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: rgba(201, 52, 52, 1);
color: #fff!important;
line-height: 1.7em;
animation:color-change2 0.2s infinite;
-webkit-animation:color-change2 0.2s infinite; /* Safari and Chrome */
}
body {
animation:color-change 0.2s infinite;
-webkit-animation:color-change 0.2s infinite; /* Safari and Chrome */
}
@keyframes color-change
{
from {background:yellow;}
to {background:#7ac968;}
}
@-webkit-keyframes color-change /* Safari and Chrome */
{
from {background:yellow;}
to {background:#7ac968;}
}@keyframes color-change2
{
from {background:red;}
to {background:#7ac968;}
}
@-webkit-keyframes color-change2 /* Safari and Chrome */
{
from {background:red;}
to {background:#7ac968;}
}
@keyframes color-change3
{
0% {transform:scale(1) rotate(0deg);}
100% {transform:scale(1.2) rotate(15deg);}
}
@-webkit-keyframes color-change3 /* Safari and Chrome */
{
0% {transform:scale(1) rotate(0deg);}
100% {transform:scale(1.2) rotate(15deg);}
}