动画文本围绕一个圆圈旋转

Question

我使用 lettering.js（它是一个跨度注入器）和 css 转换来映射圆形边缘周围的一行文本。我现在的小目标是使用关键帧为该文本设置动画。我的问题是，当我将动画声明与变换放在同一个 h1 规则中时，文本会被弄乱。将 h1 包含在具有自己的规则的 div id 中会完全产生另一个问题。

这是我所拥有的：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

这是为什么？我最初的想法是动画和变换在某种程度上是冲突的。我有点迷路了。帮忙？

Answer 1

我能够通过延迟每个后续字母的动画来使其工作。它没有使用转换，但它可能会帮助你：http://cssdeck.com/labs/2y3dtik1