<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
@keyframes movingheart{
0% {width:100px;height:100px;left:0px;top:0px;opacity:0.2}
25% {width:200px;height:200px;left:100px;top:100px;opacity:0.4；transform:rotate(30deg);}
75% {width:100px;height:100px;left:300px;top:0px;opacity:0.8;transform:rotate(60deg);}
100% {width:100px;height:100px;left:0px;top:0px;opacity:0.2;tranform:rotate(90deg);}
}
img.movingheart{
position:absolute;
width:100px;
height:100px;
animation-name:movingheart;
animation-duration:6s;
animation-iteration-count:infinite;
animation-direction:normal;
}
img.delay1{
animation-delay:2s;
}
img.delay2{
animation-delay:4s;
}
</style>
</head>
<body>
<img class="movingheart"
<img class="movingheart delay1"
src="http://www.iconsplace.com/download/pink-hearts-512.gif">
<img class="movingheart delay2"
src="http://www.iconsplace.com/download/orange-hearts-512.gif">
</body>
</html>