Question

我正在尝试设置一个div元素，这样当它变为活动状态时，会发生一些事情。首先，我希望该div内部的嵌套元素移出一个单独的时间。然后父div应该滑到左边。我目前正在嵌套div上使用动画功能，并在不同的持续时间更改其左侧值。一旦我点击父元素，我希望它们变得活跃，但似乎缺少某些东西。我设置了一个小提琴here

<div id="landingpage">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
<div id="b">hello</div>
<div id="c"></div>
<div id="d"></div>

body {margin:0;padding:0;width:100%;}
#landingpage {
width:100%;
height:600px;
background:red;
position:absolute;
left:0;
transition-duration:4s;
transition-delay:5s;
}
#b {
width:100%;
height:600px;   
background:black;
position:absolute;
left:9999px;
transition:1s;
}

#one, #two, #three {
width:100px;
height:100px;
border:2px solid black;
position:absolute;
}
@keyframes firstToGo
{
from {left: 10%;}

to {left:-9999px;}
}

@-webkit-keyframes firstToGo /* Safari and Chrome */
{
from {left: 10%;}
to {left:-9999px;}
}
@keyframes nextToGo
{
from {left: 30%;}
to {left:-9999px;}
}

@-webkit-keyframes nextToGo /* Safari and Chrome */
{
from {left: 30%;}
to {left:-9999px;}
}
@keyframes lastToGo
{
from {left: 60%;}
to {left:-9999px;}
}

@-webkit-keyframes lastToGo /* Safari and Chrome */
{
from {left: 60%;}
to {left:-9999px;}
}
#one {
    left:10%;
    top:40%;
    transition:.1s;
    -moz-transition:.1s;
}

#two {
    animation: nextToGo 10s paused;
    -webkit-animation: nextToGo 10s paused; /* Safari and Chrome */
    left:30%;
    top:40%;
    transition:.1s;
    -moz-transition:.1s;
}
#three {
    animation: lastToGo 15s paused;
    -webkit-animation: lastToGo 12s paused; /* Safari and Chrome */
    left:60%;
    top:40%;
    transition:.1s;
    -moz-transition:.1s;
}
#landingpage:active {
    left:-9999px;
}

#landingpage:active+#b{
    left:0px;
}
#landingpage:active+#one{
    animation: firstToGo 5s;
    -webkit-animation: firstToGo 5s; /* Safari and Chrome */
}

Answer 1

您无法在有效的HTML / CSS中执行此操作，因为DIV不是可单击的元素。所以基本上，你需要将它包装在一个A元素中。但它仅在HTML5中有效。

第二个解决方案：用JS处理点击。

询问您是否需要我上传您的小提琴：）

当我点击父div时，我想要一个CSS3动画

1 个答案: