有兩個關鍵幀不能同時工作

我有兩個div帽和我想在轉換中使用的鍵。該div「帽子」的作品，但其他沒有。我不知道爲什麼div「襪子」不起作用。它與「帽子」一樣，但仍然不起作用。我試圖將@keyframe pageExitRight屬性從「right：40」更改爲「left：40」，但仍未改變任何內容。有兩個關鍵幀不能同時工作

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你需要爲你動畫的元素添加一個「位置」，並在你的CSS中指定一個單位。如果您想要解決這個問題，請分享您使用的所有相關代碼。 –

我會通過添加html來更新代碼 –

是的，這是我想要做的事情，但我有兩個圈子，我想要滑出的圖像 –

您在@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

我試過了，仍然只有帶ID的div =「帽子」完成動畫時，id =「sock」的其他div完全不動。 –

有兩個關鍵幀不能同時工作

回答

相關問題