HTML Code:

<div class="wrapper">
  <header><h1 class="alert">Still Experimental</h1></header>
<div class='container'>
      <div class='container_heading'>
      <h1>
        CSS / Material Example
      </h1>
    </div>
  <div class='container_ui'>

    <input id='message-1' type='checkbox'>
    <label for='message-1' href='#move'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/gerrenlamson/128.jpg'>
          <div class='color_bar one'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>
          aspca
        </h2>
        <div class='dot active'></div>
        <h3>subj: thanks, you are amazing</h3>
        <h4>Your generous donation saved 3 million puppies...</h4>
      </div>
      <div class='container_ui__expand' id='close'>
        <div class='heading'>
          <div class='heading_head'></div>
          <label for='message-1'>
            x
          </label>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/gerrenlamson/128.jpg'>
            </div>
            <div class='details'>
              <h2>aspca</h2>
              <h3>subj: thanks you are amazing</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-2' type='checkbox'>
    <label for='message-2'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg'>
          <div class='color_bar two'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>Nobel prize foundation</h2>
        <div class='dot'></div>
        <h3>subj: Your paper on molecular fusion</h3>
        <h4>We are awarding you the nobel...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading two'>
          <div class='heading_head'>
            <label for='message-2'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg'>
            </div>
            <div class='details'>
              <h2>Nobel prize foundation</h2>
              <h3>subj: Your paper on molecular</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-3' type='checkbox'>
    <label for='message-3'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/alexmarin/128.jpg'>
          <div class='color_bar three'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>megan fox</h2>
        <div class='dot active'></div>
        <h3>subj: i miss you</h3>
        <h4>Where have you been? I've been trying to call you...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading three'>
          <div class='heading_head'>
            <label for='message-3'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/alexmarin/128.jpg'>
            </div>
            <div class='details'>
              <h2>megan fox</h2>
              <h3>subj: i miss you</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-4' type='checkbox'>
    <label for='message-4'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'>
          <div class='color_bar four'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>Linkedin</h2>
        <div class='dot active'></div>
        <h3>subj: Message from bill gates</h3>
        <h4>I want to add you to my personal network...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading four'>
          <div class='heading_head'>
            <label for='message-4'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'>
            </div>
            <div class='details'>
              <h2>Linkedin</h2>
              <h3>Message from bill gates</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-5' type='checkbox'>
    <label for='message-5'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg'>
          <div class='color_bar five'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>Jesse pinkman</h2>
        <div class='dot'></div>
        <h3>subj: Let's get together sometime yo!</h3>
        <h4>Hey, how's it going? You free at all this weekend...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading five'>
          <div class='heading_head'>
            <label for='message-5'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg'>
            </div>
            <div class='details'>
              <h2>Jesse pinkman</h2>
              <h3>subj: Let's get together sometime yo!</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
    <input id='message-6' type='checkbox'>
    <label for='message-6'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg'>
          <div class='color_bar six'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>James cameron</h2>
        <div class='dot active'></div>
        <h3>subj: avatar 2</h3>
        <h4>Please consider writing the script...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading six'>
          <div class='heading_head'>
            <label for='message-6'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='face'>
              <img src='https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg'>
            </div>
            <div class='details'>
              <h2>James cameron</h2>
              <h3>subj: avatar 2</h3>
            </div>
          </div>
          <div class='content'>
            <p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
            <span>Reply:</span>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </label>
   <input id='message-7' type='checkbox'>
    <label for='message-7'>
      <div class='container_ui__item'>
        <div class='face'>
          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg'>
          <div class='color_bar'>
            <p>Now Reading</p>
            <span>Read</span>
          </div>
        </div>
        <h2>James cameron</h2>
        <div class='dot active'></div>
        <h3>subj: avatar 2</h3>
        <h4>Please consider writing the script...</h4>
      </div>
      <div class='container_ui__expand'>
        <div class='heading six'>
          <div class='heading_head'>
            <label for='message-7'>
              x
            </label>
          </div>
        </div>
        <div class='body'>
          <div class='user'>
            <div class='details'>
              <h1>Headline</h1>
            </div>
          </div>
          <div class='content'>
            <img src="http://lorempixel.com/900/300/nature/">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.</p>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>
</div>

 

CSS Code:

@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,800,900,400);

body{
background: #4ebcff;
  font-family: 'Raleway', sans-serif;
  background-size:100% 100%;
  height:100vh;
  margin:0;
  padding:0;
  
  header{
        width:80%;
    text-align:center;
    margin:auto;
    h1{
    margin-top:40px;
    color:#fff;
    font-weight:100;
    }
  }
  .container{
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
    width:80%;
    text-align:center;
    height:600px;
    position:absolute;
    left:0;
    right:0;
    overflow:hidden;
    margin:auto;
    top:0;
    bottom:0;
    &_heading{
   position: fixed;
  z-index: 9999;
        height:60px;
        width:80%;
        background: #333658;
        .header_icon{
          float:left;
          text-align:left;
          img{
            margin:17px 20px 20px 20px;
            cursor:pointer;
          }
        }
        h1{
          color:#fff;
          text-transform:uppercase;
          font-weight:300;
          margin: 0;
          font-size:16px;
          float:left;
          width:33%;
          letter-spacing:1px;
          line-height: 64px;
        }
        .header_icon{
          float:left;
          width:33%;
          height:40px
        }
        .menu_icon{
          width:33%;
          float:left;
          text-align:right;
          position: relative;
          top: 25px;
          right: 20px;
          cursor:pointer;
          div{
            width: 21px;
            height: 2px;
            float: right;
            display: block;
            margin-bottom: 3px;
            border-radius: 1px;
            clear: both;
            background: rgba(0, 0, 0, 0.26);
          }
        }
      }
    &_ui{
      position: absolute;
    padding-top:61px;
      width:100%;
      background:white;
      height: 600px;
      overflow: scroll;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
      
      input[type="checkbox"]{
        display:none;
      }
      label:hover > .container_ui__item .face .color_bar{
        width:100%;
        transition-property:width;
        transition-duration:.4s;
        -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        span{
          opacity:1;
          transition-property:opacity;
          transition-duration:.2s;
          -webkit-transition-timing-function:linear;
          transition-delay:.3s;
        }
        p{
          opacity:0;
        }
      }
      input[type="checkbox"]:checked + label > .container_ui__expand{
        transition-property:left,opacity;
        transition-duration:.4s;
        left:0;
        z-index:2;
        opacity:1;
        -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        pointer-events:none;
      }
      .container_ui__expand label{
        width: 10px;
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 20px;
        font-weight: 700;
        color: rgb(166, 166, 166);
        &:hover{
          color:#444444
        }
      }
      input[type="checkbox"]:checked + label > .container_ui__expand label{
        pointer-events:auto;
      }
      input[type="checkbox"]:checked + label > .container_ui__expand .body .user .face img{
        animation:pop .5s .5s forwards; 
      }
      input[type="checkbox"]:checked + label > .container_ui__expand .body .user .details{
        animation:popup .5s .5s forwards; 
      }
      input[type="checkbox"]:checked + label > .container_ui__expand .body .content{
        animation:popup .5s .7s forwards; 
      }
      input[type="checkbox"]:not(:checked) + label > .container_ui__expand .body .user .face img{
        animation:poprev .5s .5s forwards;
        transform:scale(0);
        transition-property:transform;
      }
      input[type="checkbox"]:not(:checked) + label > .container_ui__expand .body .content{}
      transition-property:opacity,top;
      transition-duration:0.4s;
      animation:pop .5s forwards;
      input[type="checkbox"]:checked + label > .container_ui__item .face .color_bar{
        right:auto;
        width: 150px;
        height: 71px;
        p{
          opacity:1;
          transition-duration:.3s;
          transition-delay:0.4s;
          transition-property:opacity
        }
        span{
          display:none;

        }
      }
      label{
        cursor: pointer;
        display: block;
        max-height: 71px;
        float: left;
        width: 100%;
        overflow: hidden;
        &:hover > .container_ui__item{
          background-color: #EAEAEA !important
        }
      }
      label .container_ui__item{
        pointer-events:none;
      }
      &__item{
        width: 100%;
        float: left;
        height: 74px;
        text-align:left;
        color: white;
        background: #fff;
        cursor: pointer;
        border: 1px solid #eee;
        h2,h3,h4{
          color:black;
        }
        h2{
          font-size: 11px;
          display: inline-block;
          color: #515151;
          text-transform: uppercase;
          font-weight: 800;
          margin: 10px 0px 0px 0px;
          padding-top: 0px;
        }
        h3{
          font-size: 8px;
          font-weight: 800;
          margin: 5px 0px 10px 0px;
          text-transform: uppercase;
          color: #B2B2B2;
        }
        h4{
          font-size: 10px;
          font-weight: 600;
          margin: 0;
          color: #919191;
        }
        .face{
          float:left;
          clear:left;
          margin:0;
          margin-right:10px;
          position:relative;
          img{
            height: 81px;
            /* margin: 10px; */
            /* border-radius: 5px; */
          }
          .color_bar{
            float: right;
            width: 6px;
            background: rgb(86, 182, 153);
            position: absolute;
            right: 0;
            text-align:center;
            height: 71px;
            top: 0;
            z-index:1;
            p{
              opacity:0;
              margin-top:26px;
            }
            span{
              opacity:0;
              font-size:12px;
              position:relative;
              top: -56px;
            }
          }
        }
      }
      .dot{
        width: 6px;
        height: 6px;
        background: #0091ea;
        border-radius: 100%;
        display: inline-block;
        position: relative;
        top: -1px;
        z-index:-0;
        left: 3px;
      }
      .active{
        background:rgb(108, 190, 99);
      }
      &__expand{

        width:100%;
        height: 100%;
        position:absolute;
        top:61px;
        transition-delay:.2s;
        transition-property:left,opacity;
        opacity:0;
        transition-duration:.4s;
        left:0;
        z-index:-1;
        background:white;
        .body{
          .content{
            width:100%;
            text-align:left;
            opacity:0;
            overflow: scroll;
            padding-bottom:60px;
            img{
              width:100%;
              max-width:100%;
            }
            p{
              b{
                color:#444444;
              }
              text-align: left;
              font-size:1em;
              line-height:1.5em;
              padding: 5px 25px;;
              color:rgb(155, 155, 155);
              font-weight:500;
            }
            span{
              display:block;
              padding:0px 25px;
              font-weight:800;
              position:relative;
              top:-10px;
              font-size:10px;
              color:rgb(125, 125, 125);;
            }
            textarea{
              margin: 0px 25px;
              width: 295px;
              resize: none;
              border: 1px solid rgb(224, 224, 224);
              height: 60px;
              border-radius: 3px;
            }
          }
          .user{

            .details{
              opacity:0;
              top:10px;
              padding-left:40px;
              position:relative;
              float:left;
              width: 240px;
              text-align: left;
              h2{
                font-size: 14px;
                display: inline-block;
                color: #515151;
                text-transform: uppercase;
                font-weight: 800;
                margin: 13px 0px 0px 0px;
                padding-top: 0px;
              }
              h3{
                font-size: 12px;
                font-weight: 300;
                margin: 5px 0px 10px 0px;
                text-transform: uppercase;
                color: #B2B2B2;
              }
              h4{
                font-size: 10px;
                font-weight: 600;
                margin: 0;
                color: #919191;
              }
            }
            .face{
              float: left;
              img{
                width: 40px;
                transform:scale(0);
                border-radius: 100%;
                border: 2px solid rgb(255, 255, 255);
                margin: 10px 25px;
              }
            }
          }
        }
        .heading{
          height: 10px;
          width: 100%;
          background: #56b699;
          &_head{
            h1{
              color: #aeb1d8;
              text-transform: uppercase;
              font-weight: 700;
              height: 10px;
              margin: 0;
              font-size: 12px;
              float: left;
              width: 100%;
              letter-spacing: 1px;
              line-height: 64px;
            }
          }
        }
      }
    }
  }
}

.one{
  background:#0091ea  !important;
}

.two{
  background:#0091ea  !important;
}

.three{
  background:#0091ea  !important
}

.four{
  background:#0091ea !important
}

.five{
  background:#0091ea  !important
}

.six{
  background:#0091ea  !important
}

body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand a{
  pointer-events:auto;
}

/* Let's do some animations! */

@keyframes pop{
  0%{transform:scale(0)}
  50%{transform:scale(1.2)}
  100%{transform:scale(1)}
}

@keyframes poprev{
  0%{transform:scale(1)}
  50%{transform:scale(1.2)}
  100%{transform:scale(0)}
}

@keyframes popup{
  from{top:10px;opacity:0}
  to{top:0px;opacity:1}
}

.wrapper{
  animation: bg 10s infinite ;
    position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
}
@keyframes bg{
    0% {
background-image: -webkit-radial-gradient(10% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
   10%{
background-image: -webkit-radial-gradient(20% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
  20%{
background-image: -webkit-radial-gradient(30% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
  40%{
background-image: -webkit-radial-gradient(40% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
  50%{
background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
   60%{
background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
   70%{
background-image: -webkit-radial-gradient(40% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
   80%{
background-image: -webkit-radial-gradient(30% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
   90%{
background-image: -webkit-radial-gradient(20% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);

    }
    100% {
background-image: -webkit-radial-gradient(10% 50%, ellipse cover, rgba(255,255,255,0.3) 5%, rgba(0,0,0,0.4) 100%);
    }
  }
/* ALERT */


.alert
{
 -webkit-animation: cc 3s linear 1s infinite alternate;
 animation: cc 3s linear 3s infinite alternate;
 color: #fff;
}

@-webkit-keyframes cc
{
 0%   { color: #fff;}
  50%  { color: #edd; font-weight:900;}
 100% { color: #fff;}
}

@keyframes cc
{
 0%   { color: #fff;}
 50%  { color: #edd; font-weight:900;}
 100% { color: #fff;}
}

 

Demo:

See the Pen raKpJj by Knol Aust (@knolaust) on CodePen.