同時に動作しない2つのキーフレームがあります

私はトランジションで使用したい2つのdivsハットとキーを持っています。 div "hat"は動作しますが、もう一方は動作しません。私はdiv "ソックス"がうまくいかない理由を知らない。それは "帽子"と同じですが、それでも動作しません。 @keyframe pageExitRightプロパティを "right：40"から "left：40"に変更しようとしましたが、何も変更されませんでした。同時に動作しない2つのキーフレームがあります

body { 
    background-color: white; 
} 
.box { 

    /* TITLES OF CHOICES */  

    position: relative; 
    background-color: gainsboro; 
    border-radius: 50%; 
    width: 400px; 
    height: 400px; 
    display: inline-block; 
    margin: 10%; 
    transition: all 1s; 
} 
#hat { 
    animation-name: pageExitLeft; 
    animation-timing-function: ease-out; 
    animation-duration: 2s; 
    position: relative; 

    background-image: url(hat.jpg); 
    background-position: center; 
} 
#sock { 
    animation-name: pageExitRight; 
    animation-timing-function: ease-out; 
    animation-duration: 2s; 
    position: relative; 

    background-image: url(sock.jpeg); 
    background-position: center; 
} 
div.box:hover{ 

    /* CHANGE COLOR WHEN MOUSE HOVER */ 
    opacity: 0.5; 
} 

@keyframes pageExitLeft { 
    from {left: 40; opacity: 1} 
    to {left: -440; opacity: 0} 
} 
@keyframes pageExitRight { 
    from {right: 40; opacity: 1} 
    to {right: -440; opacity: 0} 

} 




<html> 
    <head> 
     <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 
     <div class="box" id="hat" >hat</div> 
     <div class="box" id="sock">sock</div> 
    </body> 
</html>

出典

2017-05-30 Andrew Serra

私はあなたがこのような何かをしようとしていると仮定していますか？ https://codepen.io/anon/pen/bWPzNxアニメーション化している要素に 'position'を追加し、CSSで単位を指定する必要があります。これを解決するのに役立つ場合は、使用している関連するコードをすべて共有してください。 –

htmlを追加してコードを更新します –

そして、それは私がやろうとしていることですが、スライドしたい画像を持つ2つの円があります –

あなたは@keyframesの中に欠けているユニットがあります。あなたは左：40、右：40、左：-440、右：-440と言っていますが、あなたはこれらの数字が何であるかは明記していません。

はこのCSSを試してみてください：

body { 
    background-color: white; 
} 
.box { 

    /* TITLES OF CHOICES */  

    position: relative; 
    background-color: gainsboro; 
    border-radius: 50%; 
    width: 400px; 
    height: 400px; 
    display: inline-block; 
    margin: 10%; 
    transition: all 1s; 
} 
#hat { 
    animation-name: pageExitLeft; 
    animation-timing-function: ease-out; 
    animation-duration: 2s; 
    position: relative; 

    background-image: url(hat.jpg); 
    background-position: center; 
} 
#sock { 
    animation-name: pageExitRight; 
    animation-timing-function: ease-out; 
    animation-duration: 2s; 
    position: relative; 

    background-image: url(sock.jpeg); 
    background-position: center; 
} 
div.box:hover{ 

    /* CHANGE COLOR WHEN MOUSE HOVER */ 
    opacity: 0.5; 
} 

@keyframes pageExitLeft { 
    from {left: 40px; opacity: 1} 
    to {left: -440px; opacity: 0} 
} 
@keyframes pageExitRight { 
    from {right: 40px; opacity: 1} 
    to {right: -440px; opacity: 0} 

}

出典

2017-05-30 21:03:43

私はそれを試して、 = "hat"がアニメーションを完成するid = "sock"のdivはまったく動かない。 –

同時に動作しない2つのキーフレームがあります

答えて

関連する問題