画像が180度の時に画像を変更します

こんにちは私はここで何をすべきかわかりません。画像を変更するためにdivを回転させるときにフェードを取り除く方法&が効果を発揮します。私は回転のタイミングが間違っていると思います。画像が180度の時に画像を変更します

.spinner { 
 
    position: relative; 
 
    height: 300px; 
 
    width: 600px;   
 
    animation-name: rotate; 
 
    animation-duration: 3s; 
 
    animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 
    background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQugQCqanFP9X3akqA4XtDdm0qja8v9YxdT9OazMzCes7co2SqH'); 
 
    background-size: cover; 
 
    transform-style: preserve-3d; 
 
} 
 

 
@keyframes rotate { 
 
    33.34% { 
 
    transform-style: preserve-3d; 
 
    background: url('http://media.indiatimes.in/media/content/2015/Apr/adidas-wiki_1428491439_725x725.jpg'); 
 
    transform: rotateY(180deg); 
 
    top: 0; 
 
    left: 0; 
 
    background-size: cover; 
 
    position: absolute; 
 
    height: 300px; 
 
    width: 600px; 
 
    } 
 

 
    66.68% { 
 
    transform-style: preserve-3d; 
 
    background: url('http://slodive.com/wp-content/uploads/2013/02/popular-logos/puma-logo.jpg'); 
 
    transform: rotateY(0deg); 
 
    top: 0; 
 
    left: 0; 
 
    background-size: cover; 
 
    position: absolute; 
 
    height: 300px; 
 
    width: 600px; 
 

 
    } 
 

 
    100% { 
 
    transform-style: preserve-3d; 
 
    background: url('data:image/png;base64,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'); 
 
    transform: rotateY(180deg); 
 
    top: 0; 
 
    left: 0; 
 
    background-size: cover; 
 
    position: absolute; 
 
    height: 300px; 
 
    width: 600px; 
 
    } 
 
}

<div class="card_container"> 
 
    <div class="spinner"></div> 
 
</div>

出典

2016-11-02 aldrin27

警告：キーフレームの中に 'background'（画像）を変更しないでください。 'background-image'は、遷移可能またはアニメーション可能なプロパティではありません。このスレッドを見てください - http://stackoverflow.com/questions/35994521/background-image-in-keyframe-does-not-display-in-firefox-or-internet-explorer/36005661#36005661（これは* *あなたの質問に答えはありません） – Harry

提案をありがとう。私は私が探している答えを得たときこれを変更します。 – aldrin27

まず、キーフレームの割合にアニメーションを変更する必要のないプロパティを含める必要はありません。私はこれがちょうど "変形"を残すと思います...第二に、私は0％でキーフレームスタイルを含めると、これは物事を修正する必要がありますと思います。私はちょっと試してみて、答えとして投稿してください（私が正しいとすれば！） – ne1410s

私はあなたの条件がOK理解していれば、あなたはこの希望：

をトリックは、あなたの背景画像をスムーズに変更したくないということです。これを実現するには、2つのキーフレームを異なるプロパティと非常に近いパーセントポイントで設定する必要があります。

たとえば、最初のイメージでは33.33％、2番目のイメージでは33.34％です。例では

は、あなたがおよそ10mlの液体フッ化水素を圧入2/3に33.34パーセントから行く、およそ10mlの液体フッ化水素を圧入1/3 = 33.3％

背景NUMERO 2 0％から行く、

背景NUMERO 1を設定する必要があります= 66.6パーセント
背景NUMERO 3、66.7％から100％になり

回転が滑らかでなければならないので、あなただけのすべての回転値のための1つのキーフレームを設定します。

.spinner { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 300px; 
 
    width: 600px;   
 
    animation-name: rotate; 
 
    animation-duration: 3s; 
 
    animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 
    background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQugQCqanFP9X3akqA4XtDdm0qja8v9YxdT9OazMzCes7co2SqH'); 
 
    background-size: cover; 
 
    transform-style: preserve-3d; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotateY(90deg); 
 
    } 
 
    0%, 33.33% { 
 
    background: url('http://media.indiatimes.in/media/content/2015/Apr/adidas-wiki_1428491439_725x725.jpg'); 
 
    } 
 
    33.33% { 
 
    transform: rotateY(-90deg); 
 
    } 
 

 
    33.34%, 66.68% { 
 
    background: url('http://slodive.com/wp-content/uploads/2013/02/popular-logos/puma-logo.jpg'); 
 
    } 
 
    66.68% { 
 
    transform: rotateY(90deg); 
 
    } 
 
    66.69%, 100% { 
 
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAACkCAMAAAAuTiJaAAAAjVBMVEX///8AAACpqan09PQwMDD7+/v39/fc3Nzv7+9+fn729vbs7OzPz8/g4OBFRUXy8vK0tLTm5uZOTk7IyMiFhYViYmJXV1eenp6/v78oKCjX19eOjo5AQEAeHh5vb29qampaWloRERHDw8M4ODiXl5djY2OMjIwrKysiIiK2trYLCwujo6N5eXkXFxc7Ozt6dD7hAAAPuElEQVR4nO2daXuyOhCGBcUd933HpbVa+/9/3mECKjBPAGVLz9v7S6+LFAxjMpktsVT6448//vjjjz/++DUYPT3AzHi2tq6BxuvCvloOXiXa9P9D0DC8P6zMPkp8WBvcE2Cfu1jCaWlBdtVn65G19u2rU3bVpkf/PwANX/eHXfFdE/Q0ySMUYcl6+P1sLDMhTOgyEs2KpNleg5b7w0zQ9iG5x8+6yrpdLB3WxcazccgaaTy1b+DFhKjRWLo/ztjytp8yvifAR/5iCWV/YV0cPVtHwbaDWUJz1oZ0XfMAGtrus8CcXts3VX8iZXYZgo4XCRDA8tnK2rb2xTJ6TYv+vQYaBnXnUVx3atpRck+AjmKzs37mfZw+Wr9YG33nbfRi4iYwAYVgbAygB3fUsIkW2jFvqUTAlZam6Y9W/kL4qj2DaBKWK6Cl5Tyqx1vmtZJkRgfoFyCYMHagj7N7Y+0z2EQauTUH95zItgOC0VbOo9DKKT4H3RNgUoRgQmiB2ak91C5/oTa8qjmz0/gGDT3nUSfesqHrRiNaaL0iJBOCjjppuo1cDe1sC6EKlRANtD64XnEeBsyKjpi3fb54BzmYks4XRBVpbs1d7oAQjvCq5s4g9A04hnIfDGjHEokxOzdFSCYEpGmeFjz3FWhwQBdK+IYr0ODoR6A5XbuGm9b42QoBrdS70AwmhB+6jFa7H1rfFmimiSeB4bRripaFFS20IgQTBloHH73kvoJwodAdwodA34CYnSb/GKvmfAb+1vizFQIZaZp2dls/gg2fpJH5nNUc/dRCXjz5VmhyuqZgHd0Dnq0STCyCH6exzsYHDZsWUkJr+v8FaBAuFJicGzdih+7RKh0Pq00d970o+tgYd23JGWsgpQ4Hp3Bz0EJM1pvJLGSt4noJ2IVSzMIIgGen8MltxsHrF7oKX1MoKHD9skDP8bgcFrhp1y1AFPGRKBRH85osNEjXDXTDloIQyEgblODkfERRoJF2LUYYMYEC0O5BDi4EGjby15S4UEAFHB5DCbpQqnnnfqCVqrmuXpkteeRCoeCrtiYNVQMxa2oAPudDZ/HBrKnnnfuBAiCEv859BREwlL4mmp0NtJp4gmNw2M5wbxUBGvCEsK1YnPtGAwSG84WQkZk8K5l8cm6fPUDRt8fCqiay2ekIjQmBlHoJBZI+yZCCAY4qUnRPlQU9f9Xs/wAoo/QQ2p5dpcwjDOeLtRCZyQ00OT0JTOhbqOad+4HGOLEmq4vNTquFrtpc6DWhO2S2+PzzZAfrKEdcKUgaMZFGTClsyA0FelvoQolwNjKTB03+ETdPwQM0rVVLcPrpo+CXoNOXuVB8zmruYoiMNJ3/u+XNX8JvTW0XCqgbl0kdVFccKPyFROModnD9c8+/lqW3B/Czm4UIIy7A6HQ5NUt1dpEWtSr677EsC7XjCnDg7QBPqWrqpVD8QAE4fBvAHKPFAdqiIjCGzOStFbxiLbw9gMnTcePJt2qBNLmRRoOqyVyoAY0nlCKtiDg3DgAH8Q2j6Hv8MlYBJACXD+ArkEsOX3NMD4uRUdKCTmX0PQPU7yIZWvLOHkGcm2YnHJy0HPIEDOLgD5NF36NaHV/Y7NSmJTbQdvYtBky2yXLEUTKIcY9qscgqM9XHz/mq83xTuAsVo7DAtv78PUC+hZ8G6HehcBfq42mZzfgLUWQWioZmZzPW7PRrtGp0jli5EBFf7muPsXe5MiHQl95FhXwTkqbcTPZy8nUA+hY+OooloUp1Nju35kOP3fhAI5ccika4UNEzjfAXZODcoRflZieooHrqsQuTKCUvYRWVKO2oW7GE5hNCVxqWelArSDYyuAA6dUk2T0AuFHesNNeSgu4Qx+d2Rs/oQyGSCYFXDC9xnZoLRR6gLSqsiBg7J4iptwchprWLcnk87lkuwhSTiAuiIKMotoOpFoDXhzJR1NzHWTkXii33Fexyu5BLXntptwXCa0GEDWuHE+55cbSZwW+LRb4BQpRgw4ooWlS7YHZaaPB5Qhbl6BmtXIiIC8AMybI4uy3ga9LDUCnlBCYMnh2I4UIZkr4XRYvZrt8GDqM6kLaHSRgRzkeWyAcKlXnSmdC3UE6J+eACIKUlFxrdA19TTDiYI0bj0iM0lCMeqJ0jZnHueVdWsEyQJW9YoGFcLmEj7QAyd8+K8TDfQlm4AEhpyX1Bcsmh/Sp1oXRUfHx5Cg1aN2pnofhy34ZXXcS0kWah+mB2Wn3kXZwf0bE+L4x8VKymTjoLisGUtIiowgoBgrwftHPCiY+hIbiB8+9QvvcAzk5d1t8klL9m6WhKbsCLaSaNI0oL+YQLhaJiPRgW7jwSmsgeOac+O+v9427TTimLyubhTSyCsj2Xwm9Ghu+cZifa9norw9k8uW9zRfd4N82ngdlbnrVlehlAplCcnA8oJhaQ3wxtURHpQX7CFo+l7V27yM9ZSAWj2R511tpZTxLDNPyzmgf6RTgB7puwudB4gvqOXEleYaqJZQV5Ud+u0Mro61mn5AC0hrpIUW+/kj1w6r8dbxFDBYsC2iOBvEttTo9FfsJPHRvK91o96Fukss2uft2uyKu2vs2E38HUF8YCI8rpr+xkjPC9UMjgOkoqHu7GKzTSkrpQxmI2ct9gMi1H/3847Yq/vpwLwNEmkritMK7ga8p2W1AtFRxM96AiakuYQxmOdndNPRgmT8eY64B3whbJH0flScLPYhiiBrHvEN0k2W3xMMSg5+GfDa/Qb+tPvXpopOH0G4Ogd4LFIo3z06Itf01kWdCXBGNvrtCQPWi9aRv0p9+egM3tms6mjW0wAIo3oZRkuy475RIO6QpbtCZzy6HT5agBEwY4Xn+zcm048kYAL6e0jJYr2yrJBHBzG+B7imEjf000OoU1BiPnTiVHKi6UMVuO/THTUWp2rD2vBv6VZMF8yLs2gYHZtfQ4CSEB6ZlfyHq7OCkCaA62a14Woa5P39SDfe0s06uU6a+ZhmWz86FN0HByxhN8TeolcocOwrdCDqlTodxFDwsizxIvrg1euPOVYnERFenfAqsJi3OP71Yg7L3UhQrfsL5A34AYtXE2rDvbIBnN/mz7aQX/d/6dbh6etFRAw/Lo7GMkwu6TUpe6UFU0BJ3zDdm70evR92fEySsDDVffT5Hz9amnHBvRwedzK/WuPmDkgVyoJhKNWFSHYDfapxi4UNmLc2DallxWd86BCFi5dR1XwGdZnTTnpcBxi/yf32Wzc/f4d9R9UurQSBOzEw1BZ+BCm08Y0XFmp89IWvRGuJzZSm+9fCLcioF/HcKbUARoiRTHk8CKKBo0VRDMdSJzOPazsvtiRBYjaJ6zoZr774HkhvMxi83HjtkVWDuZMb56fLRMqTfRjlAR50ZDcGd4PjwAqdewwqQ7FWEk9YdT+Xkdk14mmWR34PjrL8tMAM+KMeTcSF0o6W4L50vC2p6EFuNEPrKnzaMT4sGMF9nUL7uBxop/bcFHoTkAEXzSdWSmiup4cNSGU5hrCw1qoYk9fKAx6Ocywr6Jy2CZVU3pfbtJwODgAghrc1woJBrpbgu3EhkfwTCOXfwn56xnl4W/Wxb+ZMUCZ6EEwLCgo1RxFRUtqlU0BN0twdjq35YMWRoiHvNNlqe2PtStv5ZQGuCw6fN0Eyn1KnxN0sLIrvtxlxW8Yfkb15/G5phpCW7rEe33+VD8NGmPuwI2PZG2h/UdYvwiI+2eBMB7nkaxjDQJu0xSyR6eitQX4ZBkoRyA49OUiMaxo9Bui/uygnP1yzgn8mE2s6yL1Tzfs8/x5YuSR6lys5e0vQEjabR8QUvk/jBsWFx5+WUsDsvsS7A8BSmfvu+n81nxMfccKVKanSuBVlLq7UOFcRa22DT4/3bDY1nZzPltlfVsqlnEbW3fe44rwFWG6+UDb3XLwCe0chBvq8Fa8dX7bVVZA9FEt5WNarfbbVabrZo+uMWTmXVq53Jit9cU2qlWtmrPgxkM8UDOx5w2Y9e9xuhYLaEZteUkhkvg8tnLrZrU50Ke1BGa0e5tX1kHtjn++oA/iqDK9Cx/bQYxN7U4NMwcf3zA8Ke1OgoIzRwuY5yb72VwzffnGgLBv0PRQqtNN9G/A+LnZ5/zzlhWUl3gL2zUF70Yh/4GJTbK/zBItpgXtZ25rjdel5g21ws4P5O7NgVsnG+a7VeVmOC2LWQDWZd/ubmfE7g/buOkTjhZpJbiAFJAeZ460zVt7+gtgWmdaVGnf5VBb+Z5bZ1vfS1jbsnm7HrFnSQBSzyzDt3ZGPXFaPXenLRZN5KWFCehhjNAGRsd1b2+eVtgtiF5LXaLp2TXfob6tdrSxz/vxRUFl8G+4POXZNubdxl9njn7eNXWD9Ao/hA+aYI1i4N2h6MXQjyQ9VSBc+DlFUyDxBsRfHTbb3hHQXZqnCUXcnzZMvruuLT0zUD67cRmvEj3e3wX+fZzLSVfqlrbL1GFwqt0PpTZ3R96Etc8eYVl+ziOd7hoBDmGsCOBe6U9JFG6/XdCPFhimZZivEzUuT2Hd72plt6IdW5hHJZqnYbGK2kZr+u1an+/edP/BuyUOzgoRk3m5eMlD8+YTbepKDGHRualGK8TfXybTWcYs+P1vr5LUWDaoYAQdjR9K17vtzH8FrM3SugdBejkUYrxBnGPfNOscdghFUa5PeqkOcTsD9wNFf1tgab8VwU4lSk+EKW118cJAhaQW4qnYqRNqDcA+NktZy3DcDSc/deo9Rq7JCEezLmI1FJsws4tl7NeTcan8aSTMFohY6PcAdJ+UrM+02NUZAg7DskqpjNgoCsusVIK+xnSJY1TMbIn3lHj+fDTUNMoC9JMtgkkTZQIYccC/Lx5IazzLF1MivQnAPPlQ107FqDCOlBcKcabRP98RNZsv9TIk7xAwevA/LumvlXGSDeQ8yKVlE6RypsCF89B3iXFqWEVJLF1UaWLaVCMyC6ZnIqRG0WI7KRGKcb7pB48jGS7KHB3Qjqkl5qMxeDjtyp/LxlFXjGrr98RxYji7Zrql/nc/OL10k9e4bRbtqdi5Eu834hMinqlGInIIzSkYilGIuopFY9JqeRwKkbuZKvUJoqWYiQEnuWYDrf/gR0r4Z3NlXFYH9X+HadEZLN+Vr5+tUseBT7iLBlqlRRnQepabfQbQ9ivkuAsN85vKMVIg+orZX3hTH5FKUYqNNNx2w+Nf0ZihPn2wYFPKmkfuK48rYQzdH1SvHQxE5qhxxBHoXBJcbZMrTcl1jn+urqC9Gi/VX2b9If2fjvG8tU0y7rxL9ixESziHF3/oHP919ZLjDGMa3xYg9k/ZZWFM2xYkRJbNQo830dNTD00xra6Lv6X4djE1PWPHcsjrzvbkV7s4T6qU+4v2vpoMyZOjaU+XJitv6WS+A+kiPRPusQn7AAAAABJRU5ErkJggg=='); 
 
    } 
 

 
    100% { 
 
    transform: rotateY(-90deg); 
 

 
    } 
 

 
}

<div class="card_container"> 
 
    <div class="spinner"></div> 
 
</div>

出典

2016-11-02 17:15:21 vals

はい！それが私が探していたものです。大変ありがとうございました。私は '33.34％、66.68％'がうまくいくかどうかわからない。それを私に説明してもらえますか？または読むことができる資料があります。 – aldrin27

さらに画像を追加するとどうなりますか？変更する方法と同じ効果がありますか？ – aldrin27

私は答えについての説明を追加しました。より多くの画像を取得するには、1/3の値を1/4に、2/3の値を1/2に、新しいデータを3/4に変更します – vals

画像が180度の時に画像を変更します

答えて

関連する問題