CSS Background – Pulsating background using keyframes.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
body {
animation: pulsate_background 8s infinite;
}
@keyframes pulsate_background {
0% {
background-color: #b7b937;
}
25% {
background-color: #3a5a27;
}
50% {
background-color: #42a5b3;
}
75% {
background-color: #682d4b;
}
100% {
background-color: #c22d2d;
}
}
a {
padding-top:40px;
font-family: sans-serif;
font-size:10px;
font-weight:bold;
text-decoration:none;
color:#4158D0;
}
body { animation: pulsate_background 8s infinite; } @keyframes pulsate_background { 0% { background-color: #b7b937; } 25% { background-color: #3a5a27; } 50% { background-color: #42a5b3; } 75% { background-color: #682d4b; } 100% { background-color: #c22d2d; } } a { padding-top:40px; font-family: sans-serif; font-size:10px; font-weight:bold; text-decoration:none; color:#4158D0; }
body {
  animation: pulsate_background 8s infinite;
}

@keyframes pulsate_background {
  0% {
    background-color: #b7b937;
  }
  25% {
    background-color: #3a5a27;
  }

  50% {
    background-color: #42a5b3;
  }

  75% {
    background-color: #682d4b;
  }

  100% {
    background-color: #c22d2d;
  }
}

a {
  padding-top:40px;
  font-family: sans-serif;
  font-size:10px;
  font-weight:bold;
  text-decoration:none;
  color:#4158D0;
}

Categorized in: