Question

我想要在转换中使用两个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>

Answer 1

你缺少@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}

}

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

1 个答案: