анимация текста для вращения по кругу

Я использовал lettering.js (который является инжектором интервалов) и преобразования css для сопоставления строки текста с краем круга. Моя небольшая цель прямо сейчас — анимировать этот текст с помощью ключевых кадров. И моя проблема в том, что текст смешивается, когда я помещаю объявления анимации в одно и то же правило h1 с преобразованиями. Содержание h1 в идентификаторе div с его собственными правилами создает совершенно другую проблему.

Вот что у меня есть: http://cssdeck.com/labs/oeik8vo69s

    h1 span {
      font: 12px Monaco, MonoSpace;
      height: 150px;
      position: absolute;
      width: 15px;
      left: 350px;
      top: 100px;
      transform-origin: bottom center;
      -moz-transform-origin: bottom center;
      animation: rotation 2s infinite linear;
      -webkit-animation: rotation 2s infinite linear;
      -moz-animation: rotation 2s infinite linear;
    }

    @keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to   {-webkit-transform: rotate(359deg);}
    }

    @-webkit-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to   {-webkit-transform: rotate(359deg);}
    }

    @-moz-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to   {-webkit-transform: rotate(359deg);}
    }

    .char1 { 
      transform: rotate(6deg);
      -moz-transform: rotate(6deg);
      -webkit-transform: rotate(6deg);
    }

    .char2 { 
      transform: rotate(12deg);
      -moz-transform: rotate(12deg);
      -webkit-transform: rotate(12deg);
    }

    .char3 { 
      transform: rotate(18deg);
      -moz-transform: rotate(18deg);
      -webkit-transform: rotate(18deg);
    }

    .char4 { 
      transform: rotate(24deg);
      -moz-transform: rotate(24deg);
      -webkit-transform: rotate(24deg);
    }

    .char5 { 
      transform: rotate(30deg);
      -moz-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
    }

    .char6 { 
      transform: rotate(36deg);
      -moz-transform: rotate(36deg);
      -webkit-transform: rotate(36deg);
    }
    etc...

И я хочу, чтобы текст вращался так: http://www.alternativetech.net/images/laughing_man_animated.gif

Почему это? Сначала я подумал, что анимация и трансформация каким-то образом противоречат друг другу. Я немного потерян. Помощь?