所以我正在制作一个广告,该广告仅具有使用css的动画(这是项目的要求)。问题是我无法从屏幕上删除元素,因为display属性无法设置动画。我想从屏幕上删除元素,因为需要完成2次完整的场景更改,因此将有3个场景。旧元素需要消失,新元素需要在几分之一秒之内显示出来。
我已经没有使用JavaScript达到了以下状态,但是我不知道如何使2张图像消失并为文本div的下一个元素腾出空间。
https://jsfiddle.net/br93px4z/1/
变化是javascript已被完全删除
并且以下css已被编辑:
@keyframes scale{
0%{transform: scale(0.2);}
99.9%{transform: scale(2.3);left:280px;top:40px;}
100%{transform: scale(0.0000001);left: -4000px;top: -4000px;}
}
@keyframes topToBottom{
0%{transform: translateY(-100px);}
80%{transform: translateX(700px) translateY(100px) scale(2);left: -248px;
top: -62px;}
99%{transform: translateX(700px) translateY(100px) scale(2);left: -248px;
top: -62px;}
100%{transform: scale(0.0000001);left: -4000px;top: -4000px;}
}
这是我想要实现的目标,但可以使用javascript实现:
https://jsfiddle.net/t6ackzeb/4/
重要的javascript使用(仅用于阅读):
logo.addEventListener("webkitAnimationEnd", postAnimation1);
logo.addEventListener("animationend", postAnimation1);
function postAnimation1() {
logo.style.display = "none";
part1.style.backgroundColor = "#d6a333";
part1.style.backgroundImage = "none";
txtAdventure.style.display="block";
}
txtAdventure.addEventListener("animationend", postAnimation2);
function postAnimation2() {
img1.style.display = "none";
img2.style.display = "none";
txtAdventure.style.display="none";
part1.style.backgroundImage="url('https://i.imgur.com/KsS80IE.png')"
txt1.style.display = "block";
txt2.style.display = "block";
txt3.style.display = "block";
endLogo.style.display = "block";
}
````````````````````````
So is there an an alternative to achieving the same results as display:none; but without using javascript ?
thank you
Found the solution thanks to https://stackoverflow.com/users/9166287/adnan-toky :
here:
https://jsfiddle.net/mnpsavkq/16/
最佳答案
请尝试以下代码示例。
CSS:
.animatedDiv {
height:100px;
width:100px;
float: left;
margin:5px;
}
.d1 {
animation:hide1 10s linear 10;
background:red;
}
.d2 {
animation:hide2 10s linear 10;
background:green;
}
.d3 {
animation:hide3 10s linear 10;
background:blue;
}
@keyframes hide1{
0% {
opacity:1;
height:100px;
width:100px;
}
33% {
opacity:0;
height: 100px;
width:100px;
}
34% {
width: 0;
height: 0;
}
100% {
opacity:0;
height:0;
width:0;
}
}
@keyframes hide2{
0% {
opacity:1;
height:100px;
width:100px;
}
33% {
opacity:1;
}
66% {
opacity:0;
height: 100px;
width:100px;
}
67% {
width: 0;
height: 0;
}
100% {
opacity:0;
height:0;
width:0;
}
}
@keyframes hide3{
0% {
opacity:1;
height:100px;
width:100px;
}
66% {
opacity:1;
}
99% {
opacity:0;
height: 100px;
width:100px;
}
100% {
width: 0;
height: 0;
}
}
HTML:
<div class="animatedDiv d1"></div>
<div class="animatedDiv d2"></div>
<div class="animatedDiv d3"></div>