#donor-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 365px;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/HElejA9.png") !important;
animation-name: tada;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}

#donor-notification .date {
margin-right: 40px;
padding-top: 65px;
text-align: right;
line-height: 20px;
vertical-align: top;
font-size: 20px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: white;
}

#donor-notification .streamname {
visibility: hidden;
margin-left: 100px;
padding-top: 28px;
text-align: left;
line-height: 26px;
vertical-align: top;
font-size: 24px;
font-family: Algerian;
text-shadow: 2px 2px 1px #FFF;
color: black;
}

#donor-notification .message {
margin-left: 50px;
float: left;
padding-top: 9px;
width: 70%;
line-height: 40px;
text-align: left;
vertical-align: top;
font-size: 20px;
font-family: Verdana;
color: white;
}

#donor-notification .amount {
float: right;
width: 21%;
padding-top: 17px;
text-align: left;
line-height: 20px;
vertical-align: top;
font-size: 40px;
font-family: Verdana;
color: white;
}

#donor-notification .donor {
margin-left: 320px;
padding-top: 105px;
text-align: left;
line-height: 30px;
vertical-align: middle;
font-size: 30px;
font-family: Comic Sans MS;
text-shadow: 2px 2px 1px #000;
color: white;
}

@-webkit-keyframes example {
  0% {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}