動畫文字圍繞一個圓圈旋轉

我使用了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

這是爲什麼？我最初的想法是動畫和變換在某種程度上是相互衝突的。我有點迷路。幫幫我？

來源

2013-08-23 sabaeus

*當我把動畫聲明放入與變換*相同的h1規則時，我們可以看到它嗎？ –

我能夠通過延遲每個後續字母的動畫來得到它的工作。它不使用變換，但它可能會幫助你：http://cssdeck.com/labs/2y3dtik1

來源

2013-08-23 04:57:02

This Works！謝謝！但是你知道爲什麼在我扔在一起的版本中，所有的東西都被一起淹沒了嗎？ – sabaeus

我的理解是，當您聲明關鍵幀動畫時，旋轉規則被覆蓋。 from：0deg實質上是在應用動畫時重置每個字母。 –

動畫文字圍繞一個圓圈旋轉

回答

相關問題