<div class="moon">
  Луна восходит.
</div>

<div class="ground">
  И освещает землю.
</div>

.ground, .moon {
  text-indent: -9999px;
  overflow: hidden; /* text-indent без данного свойства может привести к рваным анимациямы */
}

.ground {
  -webkit-animation: ground-to-black 5s ease;
  -moz-animation: ground-to-black 5s ease;
  -ms-animation: ground-to-black 5s ease;
}

.moon {
  -webkit-animation: rising-moon 5s ease;
  -moz-animation: rising-moon 5s ease;
  -ms-animation: rising-moon 5s ease;
}

/* Далее следует определение кадров */