CSS Animation Lesson

<img src="sun.png" id="sun"/>
  <img src="unknown.png" id="moon"/>
  <style>
    body {
      margin:0;
    }
    @keyframes sunrise {
    0% {top:400px;left:0%;width:300px;}
    10% {top:350px;left:10%;width:300px;}
    20% {top:310px;left:20%;width:300px;}
    30% {top:280px;left:30%;width:300px;}
    40% {top:260px;left:40%;width:300px;}
    50% {top:250px;left:50%;visibility:hidden;}
    100% {top:250px;left:50%;visibility:hidden;}
    }
    @keyframes moondown {
      0% {top:250px;visibility:hidden;}
      50% {top:250px;left:50%;visibility:hidden;}
      60% {top:260px;left:60%;visibility:visible;}
      70% {top:280px;left:70%;}
      80% {top:310px;left:80%;}
      90% {top:350px;left:90%;}
      100% {top:400px;left:100%;}
    }
    #sun {
      width:300px;
      animation: sunrise 6s infinite;
      animation-timing-function: linear;
      position:fixed;
    }
    #moon {
      width:300px;
      animation: moondown 6s infinite;
      animation-timing-function: linear;
      position:fixed;
    }
  </style>

visibility:hidden
visibility:visible