テキストの文字を個別にアニメーション化する

Question

テキストの文字を別々にアニメーション化しようとしています。私が達成したいのは、彼らが一度に1つずつ飛ぶことです。私はトランジションとトランスフォームを使ってこれを行うことができることを知っています：translateX。しかし、私は持っているいくつかの問題をtheres。まず、テキストの外側のdivはすべての文字をラップしていませんし、次にtransform：translateXをスパンの1つに適用しても機能しません。私はあなたが検査するための少しデモを作成しました。ありがとう。 #logo_textフレキシボックスとspanを作る

#burger_container { 
 
    background-color: #404041; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 60px; 
 
    z-index: 101; 
 
} 
 

 
svg { 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
} 
 

 
#logo_text { 
 
    transform: rotate(-90deg); 
 
    margin-top: 350px; 
 
    font-size: 40px; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
} 
 

 
#logo_text span { 
 
    font-weight: 400; 
 
} 
 

 
#logo_text span:nth-child(1){ 
 
    transform: translatex(-50px); 
 
}

<div id="burger_container"> 
 
    <div> 
 
    <svg id="button" style="height: 26px; width: 26px;"> 
 
     <g style="" fill="#f04d43"> 
 
     <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> 
 
     </g> 
 
    </svg> 
 
    
 
     <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> 
 
</div>

https://jsfiddle.net/a3x4ykza/

Answer 1

あなたは離陸可能性があり、それぞれを次のようにトッププロパティを使用してテキストを1つずつ入力します。

各スパンタグを選択し、次にCSSアニメーションを使用します。

#logo_text span:nth-of-type(8) { 
    animation: mv 1s ease forwards; 
} 

#logo_text span:nth-of-type(9) { 
    animation: mv 1s ease forwards 1s; 
} 

#logo_text span:nth-of-type(10) { 
    animation: mv 1s ease forwards 2s; 
} 

#logo_text span:nth-of-type(11) { 
    animation: mv 1s ease forwards 3s; 
} 

#logo_text span:nth-of-type(12) { 
    animation: mv 1s ease forwards 4s; 
} 

#logo_text span:nth-of-type(13) { 
    animation: mv 1s ease forwards 5s; 
} 

#logo_text span:nth-of-type(14) { 
    animation: mv 1s ease forwards 6s; 
} 

#logo_text span:nth-of-type(15) { 
    animation: mv 1s ease forwards 7s; 
} 

#logo_text span:nth-of-type(16) { 
    animation: mv 1s ease forwards 8s; 
} 

@keyframes mv { 
    from { 
    top: 0; 
    } 
    to { 
    top: -50px; 
    } 
} 

#burger_container { 
 
    background-color: #404041; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 60px; 
 
    z-index: 101; 
 
} 
 

 
svg { 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
} 
 

 
.line1, 
 
.line2, 
 
.line3 { 
 
    transition: all 0.3s ease; 
 
} 
 

 
.open1 { 
 
    transform-origin: top left; 
 
    transform: translatex(3px) translatey(-1px) rotate(45deg); 
 
    width: 33px; 
 
} 
 

 
.open2 { 
 
    opacity: 0; 
 
} 
 

 
.open3 { 
 
    transform-origin: bottom left; 
 
    transform: translatex(3px) translatey(1px) rotate(-45deg); 
 
    width: 33px; 
 
} 
 

 
#trans_overlay { 
 
    display: none; 
 
} 
 

 
#logo_two { 
 
    display: none; 
 
} 
 

 
#logo_text { 
 
    transform: rotate(-90deg); 
 
    margin-top: 300px; /*Change this back to 350px, just to see output I have change it to 300px*/ 
 
    font-size: 40px; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
} 
 

 
#logo_text span { 
 
    font-weight: 400; 
 
    position: relative; 
 
} 
 

 
#logo_text span:nth-of-type(8) { 
 
    animation: mv 1s ease forwards; 
 
} 
 

 
#logo_text span:nth-of-type(9) { 
 
    animation: mv 1s ease forwards 1s; 
 
} 
 

 
#logo_text span:nth-of-type(10) { 
 
    animation: mv 1s ease forwards 2s; 
 
} 
 

 
#logo_text span:nth-of-type(11) { 
 
    animation: mv 1s ease forwards 3s; 
 
} 
 

 
#logo_text span:nth-of-type(12) { 
 
    animation: mv 1s ease forwards 4s; 
 
} 
 

 
#logo_text span:nth-of-type(13) { 
 
    animation: mv 1s ease forwards 5s; 
 
} 
 

 
#logo_text span:nth-of-type(14) { 
 
    animation: mv 1s ease forwards 6s; 
 
} 
 

 
#logo_text span:nth-of-type(15) { 
 
    animation: mv 1s ease forwards 7s; 
 
} 
 

 
#logo_text span:nth-of-type(16) { 
 
    animation: mv 1s ease forwards 8s; 
 
} 
 

 
@keyframes mv { 
 
    from { 
 
    top: 0; 
 
    } 
 
    to { 
 
    top: -50px; 
 
    } 
 
}

<div id="burger_container"> 
 
    <div> 
 
    <svg id="button" style="height: 26px; width: 26px;"> 
 
     <g style="" fill="#f04d43"> 
 
     <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> 
 
     </g> 
 
    </svg> 
 
    </div> 
 

 
    <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> 
 
</div>

Answer 2

display:inline-blockは、トリックを行います持っています。あなたはY軸で遊ぶ必要があります。

#burger_container { 
 
    background-color: #404041; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 60px; 
 
    z-index: 101; 
 
} 
 

 
svg { 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
} 
 

 
#logo_text { 
 
    transform: rotate(-90deg); 
 
    margin-top: 350px; 
 
    font-size: 40px; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    display: flex; 
 
} 
 

 
#logo_text span { 
 
    font-weight: 400; 
 
    display: inline-block; 
 
} 
 

 
#logo_text span:nth-child(1){ 
 
    transform: translatex(-50px); 
 
}

<div id="burger_container"> 
 
    <div> 
 
    <svg id="button" style="height: 26px; width: 26px;"> 
 
     <g style="" fill="#f04d43"> 
 
     <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> 
 
     </g> 
 
    </svg> 
 
    
 
     <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> 
 
</div>

Answer 3

あなたはあなたのためのオプション場合はJavaScriptを使用することができます。この部分のみでCSSを変更し ：

#logo_text span{ 
    position:relative; 
} 

そして最後に、あなたの体の内部で、この部分が含まれます。

<script> 
     var span_texts=document.getElementById("logo_text").getElementsByTagName("span"); 
     for(var i=0;i<span_texts.length;i++){ 
      (function(j){ 
       var elem=span_texts[j]; 
       setTimeout(function(){ 
       elem.setAttribute("style","top:-70px"); 
       },300*j+300); 
      })(i); 
     } 
</script> 

あなたはテキストが（左に）画面を降りることを見ることができましたtime.Theアニメーションの一つが300msの時に始まり、インクルード後続の各文字はそれぞれ300ミリ秒後に画面がオフになります。あなたはそれbreaksは、それが揃っていますどのようにの形成は、代わりにあなたがCSS animationを使用して、その後relativeにpositionをそれを変更し、可能性があり、私はdisplayそれを変更した場合、デフォルトでは今、inline要素であるspanタグを使用していた