web-dev-qa-db-ja.com

CSSは、左0から右0への絶対位置でdivをアニメーション化します

このサンプルを検討してください。

http://jsfiddle.net/dfabulich/ncbzz5zu/3/

<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>

予想：色が赤から青に変わると、赤い長方形は左から右にスムーズにアニメーション化されます。

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

なんでこんなことが起こっているの？どうすれば修正できますか？ （CSSで修正する必要があります…JSもjQueryもありません。）

csscss-animations
7
Dan Fabulich

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

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

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

.animated {
        position: absolute;
        width: 20%;
        height: 100%;
        top: 0;
        background-color: red;
        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>
13
Michael Coker

問題は、プロパティ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>
1
Karen Grigoryan
@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にジャンプしていました。

0
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>

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

0
UXDart

これはどのように見えるべきかです：

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

そして、これはそれに対する修正です：

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

基本的に、最初の左プロパティを指定したがターゲット値を指定しなかったため、アニメーションは何をすべきかを知りませんでした。 left:0からleft:initialにアニメーション化されました。右は左と同様の機能を果たしますが、さらに別の特性を備えています。

0
Voidvalkon