CSSは左から右に絶対配置でdivをアニメートします

このサンプルを検討してください。CSSは左から右に絶対配置でdivをアニメートします

<html> 
<body> 
<style> 
.container { 
    position: relative; 
    width: 80%; 
    height: 100px; 
    border: 1px solid black; 
} 

@keyframes slide { 
    from { background-color: red; left: 0; } 
    to { background-color: blue; right: 0; } 
} 

.animated { 
    position: absolute; 
    width: 20%; 
    height: 100%; 
    top: 0; 
    background-color: red; 
    animation-duration: 3s; 
    animation-name: slide; 
    animation-iteration-count: infinite; 
} 

</style> 
<div class=container> 
<div class=animated> 
</div></div>

http://jsfiddle.net/dfabulich/ncbzz5zu/3/期待：赤から青に色が変化するように左から右に赤い長方形がスムーズアニメートすべきです。

実際のところ：Chrome/Firefoxでは、赤い四角形がゆっくりと色が紫色に変わり、次に左から右に移動しないでテレポートしてから紫色から青色にゆっくりと変化します。 Safariでは、矩形が右に表示され、そこから移動することはありませんが、赤から青にアニメーションが適用されます。

どうしてですか？どうすれば修正できますか？（私はCSSでそれを修正する必要が...ないJS、ノーjQueryの。）

出典

2017-05-31 Dan Fabulich

1つの_property_から別の_property_に「アニメーション化」することはできません。プロパティの_value_をアニメートします。この場合、要素の幅が20％の場合、左に0〜80％のアニメーションを付けるだけです。 – CBroe

プロパティをアニメーション化する必要があります。要素の幅が不明な場合は、left: calc(100% - elemWidth)（elemWidthは要素の幅です）またはleft: 100%; transform: translateX(-100%);のいずれかを使用して左にアニメートすることができます。

また背景色をアニメーション化する必要があります。

.container { 
 
\t position: relative; 
 
\t width: 80%; 
 
\t height: 100px; 
 
\t border: 1px solid black; 
 
} 
 

 
.animated { 
 
\t position: absolute; 
 
\t width: 20%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t background-color: red; 
 
\t animation: 3s linear 0s slide infinite; 
 
} 
 

 
@keyframes slide { 
 
    from { left: 0; } 
 
    to { 
 
    left: 100%; 
 
    transform: translateX(-100%); 
 
    background: blue; 
 
    } 
 
}

<div class=container> 
 
<div class=animated> 
 
</div></div>

出典

2017-05-31 21:53:37

@keyframes slide { 
    from { left: 0;} 
    to { left: 80%; } // edit: actually endpoint should point to left:100% minus width of the element so in your case 100%-20% = 80%. In case of width of the element in px use CSS calc like: left: calc(100% - ##px); 
}

あなたがrightを使用するだけでするときには、全く別のプロパティを変更するには移行を語りました。だからあなたはleft: 0の間でジャンプしていたのですが、あなたの画面の左側に何がありますかright: 0あなたの画面の右端は何ですか？

出典

2017-05-31 21:50:12 NightKn8

ありがとう！ここで何が問題になったのか理解できますか？ –

これは、右側の親の外にボックスを移動します。そして、それは背景色を変えません。 –

コードを更新しました。 @MichaelCoker OPは、左から右へのトランジションだけを明確にしたいと思っていました。彼のjsfiddleでも要素の移動部分だけが含まれています。 – NightKn8

<html> 
 
<body> 
 
<style> 
 
.container { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
@keyframes slide { 
 
    0% { background-color: red; left: 0; } 
 
    100% { background-color: blue; left: 100%; margin-left: -20%; } 
 
} 
 

 
.animated { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-color: red; 
 
    animation-duration: 3s; 
 
    animation-name: slide; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
</style> 
 
<div class=container> 
 
<div class=animated> 
 
</div></div>

このスニペットを参照してください...

出典

2017-05-31 21:55:46 UXDart

問題は、あなたが財産leftのアニメーションを開始するが、その後でrightに置き換えることですアニメーションの終わりですジャンプする。ステップごとにアニメーションを進めるには、同じプロパティをアニメーション化しておく必要があります。

.container { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
@keyframes slide { 
 
    from { background-color: red; left: 0; } 
 
    to { background-color: blue; left: 80%; } 
 
} 
 

 
.animated { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-color: red; 
 
    animation-duration: 3s; 
 
    animation-name: slide; 
 
    animation-iteration-count: infinite; 
 
}

<div class="container"><div class="animated"></div></div>

出典

2017-05-31 21:59:00

これは、それがどのように見えるかです：

http://jsfiddle.net/ncbzz5zu/11/

そして、これはそれのための修正です：基本的に

@keyframes slide { 
    from { background-color: red; 
     left:0%;} 
    to { background-color:blue; 
     left:80%;} 
}

、アニメーションのdidntあなたが指定してから何をすべきかを知っている最初の左のプロパティは返されますが、目標値は返されませんでした。 left:0からleft:initialにアニメーションされています。右は左と同様の機能を果たしますが、それはさらに別の特性です。

出典

2017-05-31 22:00:26 Voidvalkon

CSSは左から右に絶対配置でdivをアニメートします

答えて

関連する問題