12.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>12</title>
  <base href="./images/" target="_blank">
  <style>

   img:hover{
      width:100px;
      height:100px;
      transform: rotate(360deg);
   }
     
   img{
       position: absolute;
       top:50px;
       left:100px;
/*       transition:width 2s,height 3s;*/
       transition: width 2s, height 2s,transform 2s;
       -webkit-transition:width 2s,height 2s,transform 2s;      
   }

   div#div1{
       width:300px;
       height: 300px;
       background: gray;
       animation:dh 2s linear 1s infinite;
       -webkit-animation:dh 2s linear 1s infinite;
   }

   @keyframes dh{
      from{
         background: red;
      }
      to{
        background: yellow;
      }
   }

   @-webkit-keyframes dh{
      from{
         background: red;
      }
      to{
        background: yellow;
      }
   }
         
	</style>
<body style="">

  <img src="1122.jpg" width="50px" height="50px" style="display:block;border-radius:50%;margin:0px auto;border:0px solid red;padding:3px;box-shadow: 2px 2px 5px gray;" alt="">

  <div id="div1"></div>
</body>
</html>