スパン要素の幅をアニメーション化しようとしています。CSS幅アニメーションの方向
これは私の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?
ありがとうございます。
ファンタスティック!ちょうど私が探していたもの:) – William