Question

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

以下是我的内容：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

动画文本围绕圆圈旋转

1 个答案: