CODEWITHSUNDEEP
jquerycsscss-animations
calyxofheld
calyxofheld

Reputation: 2128

animating text to rotate around a circle

I used lettering.js (which is a span injector) and css transforms to map a line of text around the edge of a circle. My small goal right now is to animate that text using keyframes. And my problem is that the text gets smushed together when I put the animation declarations into the same h1 rule with the transforms. Containing the h1 in a div id with it's own rules creates another problem entirely.

Here's what I have: 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...

And I want the text to rotate like so: http://www.alternativetech.net/images/laughing_man_animated.gif

Why is this? My initial thoughts were that the animation and transform were somehow conflicting. I'm kind of lost. Help?

Upvotes: 0

Views: 2027

Answers (1)

Andrew Joseph Nickerson
Andrew Joseph Nickerson

Reputation: 108

I was able to get it working by delaying the animation on each subsequent letter. It's not using transforms but It might help you out: http://cssdeck.com/labs/2y3dtik1

Upvotes: 1

Related Questions