CSS3 Animation - Background colour

CSS3 Animation - Background colour.markdown

CSS3 Animation - Background colour

CSS3 Animation of Background Colour | Web Creator Box http://www.webcreatorbox.com/en/tutorials/css3-animation/ 日本語 http://www.webcreatorbox.com/tech/css3-animation-colour/

Forked from Mana's Pen CSS3 Animation - Background colour.

Forked from Mana's Pen CSS3 Animation - Background colour.

Forked from Mana's Pen CSS3 Animation - Background colour.

A Pen by Emre Kılınç on CodePen.

License.

index.html

<p id="notification">This is the notification stuff.</p>

style.css

body {
  background-color: gray;
}

#notification {
  border: 1px solid white;
  padding: 20px;
  background-color: transparent;
  width: 300px;
  margin: 0 auto;
  animation: bg-color 1.5s 3, bg-color2 5.5s infinite;3
  animation-delay: 0s, 4.5s;
  -webkit-animation: bg-color 1.5s 3, bg-color2 5.5s infinite;
  -webkit-animation-delay: 0s, 4.5s;
}

@-webkit-keyframes bg-color {
  0% {
    background-color: transparent;
  }
  66% {
    background-color: red;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes bg-color {
  0% {
    background-color: transparent;
  }
  66% {
    background-color: red;
  }
  100% {
    background-color: transparent;
  }
}

@-webkit-keyframes bg-color2 {
  80% {
    background-color: transparent;
  }
  90% {
    background-color: blue;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes bg-color2 {
  80% {
    background-color: transparent;
  }
  90% {
    background-color: blue;
  }
  100% {
    background-color: transparent;
  }
}

p {
  font-family: Meiryo, "Hiragino Kaku Gothic Pro W3", sans-serif;
  text-align: center;
  color: #fff;
}