CSS幅アニメーションの方向

Question

スパン要素の幅をアニメーション化しようとしています。

これは私のHTML + CSS + jQueryの方法では、次のようになります。

.tt { 
 
\t position: absolute; 
 
\t width: 55px; 
 
\t height: 3px; 
 
\t background-color: #999997; 
 
\t top: 0; 
 
\t right: 10px; 
 
\t opacity: 0; \t 
 
} 
 

 
.tt-expand { 
 
\t width: 55px; 
 
\t opacity: 1; \t 
 
\t animation: 1s ease tt-expand; 
 
} 
 

 
@keyframes tt-expand { 
 

 
\t 0% { 
 
\t width: 0; 
 
\t } 
 
\t 100% { 
 
\t width: 55px; 
 
\t } 
 

 
} 
 

 
.relative { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 20px 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<script> 
 
jQuery(document).ready(function($) { 
 

 
setTimeout(function(){ 
 
\t $('.tt').addClass('tt-expand'); 
 
}, 1000); 
 

 
}); 
 
</script> 
 

 
<div class="relative"> 
 
\t \t <h2>Heading</h2> 
 
\t \t <span class="tt"></span> 
 
</div>

問題を：

ラインは右から左へからアニメーション化します。

が、好ましい結果：

理想的には、からアニメーション化すべきラインは、私はの幅を取得できますか質問

左から右へSPAN要素を左から右にアニメーション化するt？

ありがとうございます。

Answer 1

あなたは要素を配置するrightを使用する場合、そのwidthはあなたが左にそれを配置する必要があるので、ここではCSS Calc、left: calc(100% - 10px - 55px);

.tt { 
 
    position: absolute; 
 
    width: 55px; 
 
    height: 3px; 
 
    background-color: #999997; 
 
    top: 0; 
 
    left: calc(100% - 10px - 55px); 
 
    opacity: 0; 
 
} 
 

 
.tt-expand { 
 
    width: 55px; 
 
    opacity: 1; 
 
    animation: tt-expand 1s ease; 
 
} 
 

 
@keyframes tt-expand { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 55px; 
 
    } 
 
} 
 

 
.relative { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 20px 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<script> 
 
    jQuery(document).ready(function($) { 
 

 
    setTimeout(function() { 
 
     $('.tt').addClass('tt-expand'); 
 
    }, 1000); 
 

 
    }); 
 
</script> 
 

 
<div class="relative"> 
 
    <h2>Heading</h2> 
 
    <span class="tt"></span> 
 
</div>

---

を使用して行われ、右から成長なんらかの理由でCSS Calcを使用できない場合、幅と右の両方の値をアニメートするこのようにすることができます

クラス .tt-expandに left:50%の割り当て

.tt { 
 
    position: absolute; 
 
    width: 55px; 
 
    height: 3px; 
 
    background-color: #999997; 
 
    top: 0; 
 
    right: 10px; 
 
    opacity: 0; 
 
} 
 

 
.tt-expand { 
 
    width: 55px; 
 
    opacity: 1; 
 
    animation: tt-expand 1s ease; 
 
} 
 

 
@keyframes tt-expand { 
 
    0% { 
 
    width: 0; 
 
    right: 65px; 
 
    } 
 
    100% { 
 
    width: 55px; 
 
    right: 10px; 
 
    } 
 
} 
 

 
.relative { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 20px 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<script> 
 
    jQuery(document).ready(function($) { 
 

 
    setTimeout(function() { 
 
     $('.tt').addClass('tt-expand'); 
 
    }, 1000); 
 

 
    }); 
 
</script> 
 

 
<div class="relative"> 
 
    <h2>Heading</h2> 
 
    <span class="tt"></span> 
 
</div>

Answer 2

ことが原因parent is relativeのposition、あなたはposition:relativeparentに要素を割り当てていない場合、これは動作しません、実際には動作しますが、alignsだ、以下のように、助けるべきですページの中心からborder animationを実行します。

jQuery(document).ready(function($) { 
 
setTimeout(function(){ 
 
$('.tt').addClass('tt-expand'); 
 
}, 1000); 
 
});

.tt { 
 
    position: absolute; 
 
    width: 55px; 
 
    height: 3px; 
 
    background-color: #999997; 
 
    top: 0; 
 
    right: 10px; 
 
    opacity: 0; \t 
 
} 
 
.tt-expand { 
 
    width: 55px; 
 
    opacity: 1; \t 
 
    animation: 1s ease tt-expand; 
 
    right:0; 
 
    left:50%;/*Add this*/ 
 
} 
 

 
@keyframes tt-expand { 
 
0% { 
 
    width: 0; 
 
} 
 
100% { 
 
    width: 55px; 
 
} 
 
} 
 
.relative { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 20px 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="relative"> 
 
<h2>Heading</h2> 
 
<span class="tt"></span> 
 
</div>