有两个关键帧不能同时工作

我有两个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完全不动。 –

有两个关键帧不能同时工作

回答

相关问题