如何在一次点击中播放两个单独的动画

Question

让我首先说我是CSS/HTML编码的新手。主要是通过分解其他代码并重新构建代码来学习的。所以，我决不是一个专业人士，也许对此我有点不知所措。我的术语可能也有问题。提前道歉。

我想做的是点击一个按钮打开两个单独的动画，这可能吗？我有一种感觉，我需要学习Javascript才能做到这一点，但我不太确定是否有一种方法可以严格通过CSS来实现。

因此；你在哪里"并且直到点击该按钮而不是"隐藏"按钮时才会播放"隐藏"动画；你在哪里"只是在玩负载游戏。

#Screen {
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2
}
#Button1 {
position: fixed;
left: 0px;
right: 175px;
top: 0px;
bottom: 110px;
margin: auto;
Height: 15px;
width: 35px;
border-radius: 30px;
border: 1px solid #333;
background-image: url('https://i.pinimg.com/600x315/ef/a4/54/efa454458c927ff79e21b898bbd446f0.jpg');
background-color: #101010;
z-index: 3;
}
.tab div {
display: none;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
}
.tab div:target {
display: block;
}

/*Flicker-in-1 is for the screen to "flicker on"*/
.flicker-in-1 div {
display: none;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
-webkit-animation: flicker-in-1 2s linear 1s both;
animation: flicker-in-1 2s linear 1s both;
}

/*Minified this block of code*/
@-webkit-keyframes flicker-in-1 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
10.1% {
opacity: 1;
}
10.2% {
opacity: 0;
}
20% {
opacity: 0;
}
20.1% {
opacity: 1;
}
20.6% {
opacity: 0;
}
30% {
opacity: 0;
}
30.1% {
opacity: 1;
}
30.5% {
opacity: 1;
}
30.6% {
opacity: 0;
}
45% {
opacity: 0;
}
45.1% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1% {
opacity: 0;
}
57% {
opacity: 0;
}
57.1% {
opacity: 1;
}
60% {
opacity: 1;
}
60.1% {
opacity: 0;
}
65% {
opacity: 0;
}
65.1% {
opacity: 1;
}
75% {
opacity: 1;
}
75.1% {
opacity: 0;
}
77% {
opacity: 0;
}
77.1% {
opacity: 1;
}
85% {
opacity: 1;
}
85.1% {
opacity: 0;
}
86% {
opacity: 0;
}
86.1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.text-focus-in {
position: fixed;
left: 0px;
right: 600px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2 -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
h1 {
font-family: "Orbitron";
text-align: center;
}

<div id="Screen"></div>
<div class="text-focus-in">Where are you? </div>
<a href="#Behind">
<div id="Button1"></div>
</a>
<div class="flicker-in-1 tab">
<div id="Behind">
<h1>BEHIND</h1>
</div>
</div>

Answer 1

您可以使用这个小技巧。它依赖于可设置动画的东西旁边的复选框，并跟踪其状态(使用类似#toggle:checked ~ #animatable_element的选择器(。您可以通过单击标签来切换它。

#animatable_element {
width: 100px;
height: 100px;
background: orange;
}
#toggle {
display: none; /* optional */
}
#toggle:checked ~ #animatable_element {
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {background-color: orange;}
50% {background-color: yellow;}
100% {background-color: orange}
}
#animatable_element_2 {
width: 100px;
height: 100px;
background: blue;
}
#toggle:checked ~ #animatable_element_2 {
animation-name: example_2;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes example_2 {
0% {background-color: blue;}
50% {background-color: purple;}
100% {background-color: blue}
}

<label for='toggle'>Click me to start or stop the animation</label>
<input id='toggle' type='checkbox'/>
<div id='animatable_element_2'></div>
<div id='animatable_element'></div>

Answer 2

CSS

.animation-box {
background-color:gray;
width: 250px;
height: 250px;
}

HTML

<div class="animation-box">
<span class="fade-in-and-fade-out-animation">"Where are you?"</span>
<h1 class="pop-up-blinking-animation">RIGHT BEHIND YOU!!</h1>
</div>
<button class="btn">Start Animation</button>

解决方案使用按钮元素触发动画，并将动画层放在同一容器上，或者您可能需要深入研究JavaScript，特别是JS队列。

Answer 3

这是通过使用javascript:element.classList.add("flicker-in-1");实现的单击时添加类的按钮。

function here() {
var element = document.getElementById("here");
var element2 = document.getElementById("Behind");
element.classList.add("flicker-in-1");
element.classList.add("tab");
element2.classList.remove("hide");
}

#Screen {
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2
}
#Button1 {
position: fixed;
left: 0px;
right: 175px;
top: 0px;
bottom: 110px;
margin: auto;
Height: 15px;
width: 35px;
border-radius: 30px;
border: 1px solid #333;
background-image: url('https://i.pinimg.com/600x315/ef/a4/54/efa454458c927ff79e21b898bbd446f0.jpg');
background-color: #101010;
z-index: 3;
cursor: pointer;
}
.tab div {
display: block;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
}

/*Flicker-in-1 is for the screen to "flicker on"*/
.flicker-in-1 div {
display: block;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: 0px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
-webkit-animation: flicker-in-1 0s linear 0s both;
animation: flicker-in-1 0.5s linear 0s both;
animation-delay: 0s;
}

/*Minified this block of code*/
@-webkit-keyframes flicker-in-1 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
10.1% {
opacity: 1;
}
10.2% {
opacity: 0;
}
20% {
opacity: 0;
}
20.1% {
opacity: 1;
}
20.6% {
opacity: 0;
}
30% {
opacity: 0;
}
30.1% {
opacity: 1;
}
30.5% {
opacity: 1;
}
30.6% {
opacity: 0;
}
45% {
opacity: 0;
}
45.1% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1% {
opacity: 0;
}
57% {
opacity: 0;
}
57.1% {
opacity: 1;
}
60% {
opacity: 1;
}
60.1% {
opacity: 0;
}
65% {
opacity: 0;
}
65.1% {
opacity: 1;
}
75% {
opacity: 1;
}
75.1% {
opacity: 0;
}
77% {
opacity: 0;
}
77.1% {
opacity: 1;
}
85% {
opacity: 1;
}
85.1% {
opacity: 0;
}
86% {
opacity: 0;
}
86.1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.text-focus-in {
position: fixed;
left: 0px;
right: 600px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2 -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
h1 {
font-family: "Orbitron";
text-align: center;
}
.hide {
display: none;
}

<div id="Screen"></div>
<div class="text-focus-in">Where are you? </div>
<button id="Button1" onclick="here();"></button>
<div id="here">
<div class="hide" id="Behind">
<h1>BEHIND</h1>
</div>
</div>

PS：你必须展开片段才能正确地看到它。