Create Flash effect on images on hover using CSS3

HTML

<h1> Hover for flash effect </h1>
  <img class="flash" src="http://images.freeimages.com/images/large-previews/389/mitze-1380778.jpg" />
<br/>
  <img class="flash" src="http://images.freeimages.com/images/large-previews/72c/fox-1522156.jpg" />
<br/>
  <img class="flash" src="http://images.freeimages.com/images/large-previews/c23/hello-3-1564990.jpg" />

CSS

h1 {
  font-size: 24px;
  font-family: Calibri;
}

img {
  width: 350px;
  height: 250px;
}

.flash:hover {
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

@-webkit-keyframes flash {
  0% {  opacity: .3;  }
  100% { opacity: 1; }
}
@keyframes flash {
  0% { opacity: .3; }
  100% { opacity: 1;  }
}