Для того чтобы сделать анимацию на css нужно использовать css-оператор @keyframes а так-же from, to или %, а для того чтобы запустить анимацию нужно использовать animation-name и animation-duration.
@keyframes - ключевые кадры, испольюзуются для указания значений свойств анимаций в разлчных точках анимаций. Ключевые кадры создаются спомощью from - начало анимации, to - до, ну или 0% - 100%, 0% - from, 100% - to.

Простой пример css анимации, которую я только-что сейчас придумал:

Код:
<!DOCTYPE html>
<html>
  <head>
    <style>
    body { background-color:#000; }
    #animated {
      color:#fff;
      margin:2px 2px;
      padding: 10px 10px;
      text-align:center;
      vertical-align: middle;
      box-shadow:0px 0px 15px #f00dff;
      background-color:#be1cc9;
      border:1px solid #e3a1ff;
      position:absolute;
      animation-duration: 3s;
      animation-name:ani1;
      animation-fill-mode: forwards;
    }

    @keyframes ani1 {
      0% {
        left:60px;
        top:60px;
        width:0px;
        height:50px;
        line-height: 50px;
      }
      50% {
        left:10px;
        top:60px;
        width:100px;
        height:50px;
        line-height: 50px;
      }
      100% {
        left:10px;
        top:10px;
        width:100px;
        height:70px;
        line-height: 70px;
      }
    }
    </style>
  </head>
  <body>
    <div id="animated">Текст</div>
  </body>
</html>