CSS Animatable vertical-align Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#container { 
    margin: auto;
    padding: 10px;
    background: #333;
    color: #fff;
    box-shadow: 0 0 10px 0 #888;
}

#child {
    padding: 30px; 
    background-color: red; 
    white-space: pre;
    font-size: 20px;
  	height: 20px; 
}
img {
  	width: 150px;
  	height: 100px;
    animation: anim 10s infinite;
    vertical-align: 50px;
}
  
@keyframes anim {
  	50% { vertical-align: 150px;}
}
</style>
</head>
<body>

<h1>Animatable 'vertical-align' Property</h1>
<hr>

<p>Experience the changing value of the vertical-align property of the image.<p>
  
  <div id="container"><h3>Vertical Align Property</h3>
  	<img src="images/coast.jpg" alt="Coast" />
  	<div id="child">There are numerous windmills on the coast.</div>
</div>

</body>
</html>