0px〜から幅をアニメーション化できますか？それとも、絶対値でなければならないのでしょうか？CSSアニメーション0pxが動作しない
span {
background: red;
animation: scroolDown 1s linear;
display: inline-block;
}
@keyframes scroolDown {
from {
width: 0px;
}
to {
width: initial;
//width: 130px;//works
}
}<span>asdfdsafsafdsafdsaf</span>これはどうしてですか？あなたはinitialにwidthを設定すると
、あなたは本当に（widthプロパティのinitial valueである）autoにwidthを設定しています。
この問題は、WebKitでthis bugと報告されていた2007年に遡ります。その報告書の会話に従うことができます：
CSS WGは、自動値との間で遷移が実行されないことを解決しました。
これは、主要なブラウザのすべてのための動作ですので、autoにwidthをアニメーション化しようとしたとき、私たちは運が悪いだと私たちは、既存の問題を回避するに行かなければなりません。
回避策
ありautoにアニメーションのためのいくつかの回避策ですが、それはすでにこの前に2つの答えで参照されたようmax-widthをアニメーション化することは、これまでで最も人気があります。
この記事の回避策をリストして説明するのではなく、この問題の回避策についてthis awesome articleと表示されることをお勧めします。記事をまとめる
は、回避策は以下のとおりです。明示的な値を持つmax-height
transform JavaScriptを使用scaleXと所望の効果を達成するために
あなたは実際ににはautoにアニメーション化する機能が必要ですが、JavaScriptを使用してアニメーション化することをお勧めします。
非常に詳細な回答ありがとうございます。私はjQueryが私にとって最高の解決策であることを知りました。 – TheMatt
あなたが達成しようとしている何本か？
アニメーションがテキストの代わりに背景で表示され、背景が遅れてアニメーション化されるため、テキストが表示されなくなります。
.inner {
display: inline-block;
height:20px;
background: #c3c;
overflow: hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
animation: mymove 3s linear;
}
@keyframes mymove {
0% {
max-width: 0px;
}
100% {
max-width: 100%;
}
}<span class="inner">
This is a test text for testing the text appearance for this test.
</span>はい、しかし、私は0の幅からスパンのデフォルトの幅まで**初期値**でアニメートしたいと思います。 – TheMatt
@ TheMattこの場合、[この回答]（https://stackoverflow.com/a/3149710/1016716）のようにJavaScriptを使用してください。初期幅の値は 'auto'であり、計算可能性はありません。たとえば、width：calc（auto + 10px）と言うこともできません。そんなことはできません。あなたはトリックを使わなければなりません。 –
この場合、固定幅のイニシャルを使用することはできません。そうしないと、テキストはアニメーションなしで表示されます。 max-widthを使用しているため、幅のサイズは初期幅に達するまで値を増やすことができます。 –
あなたは最大幅ではなく、その幅をアニメーション化することができます。あなたが知っているものが少なくとも所望の端の幅と同じ大きさになるように端の幅を設定すると、自然な幅で自動的に成長が止まります！
この例では、自然なサイズの約2倍の20emで終了幅を設定し、アニメーション時間を増加させて、元の時間とほぼ同じ時間にしました。
span {
background: red;
animation: scroolDown 2s linear; /* about twice the expected time */
display: inline-block;
}
@keyframes scroolDown {
from {
max-width: 0px;
}
to {
max-width: 20em; /* about twice the expected size */
}
}<span>asdfdsafsafdsafdsaf</span>ソリューションのこの種の概念はHow can I transition height: 0; to height: auto; using CSS?から来ているので、多分私が代わりに重複として閉じているはずです。ごめんなさい。
スパンには静的以外の位置プロパティが必要です。あなたの要件に応じて、相対的/絶対的な位置を追加してみてください – Sonia
いいえ、そうではありません。 – TheMatt