有两个关键帧同时不起作用

我有我想在过渡中使用的两个divs帽子和钥匙。Div"帽子"有效，但另一个不起作用。我不知道为什么Div"袜子"不起作用。它与"帽子"相同，但仍然不起作用。我试图将@keyframe pageExitright属性从"右：40"更改为"左：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>

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

相关内容

最新更新

热门标签：