所以我正在制作一个广告,该广告仅具有使用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>

10-07 19:37
查看更多