html - 如何在不使用 javascript 的情况下在 css 或替代方案中为显示属性设置动画

Question

所以我正在制作一个广告，其中包含仅使用 css 的动画(这是该元素的要求)。问题是我无法从屏幕上删除元素，因为显示属性不可设置动画。我想从屏幕上删除元素，因为需要完整的场景更改 2 次，因此会有 3 个场景。旧元素需要消失，新元素需要在几分之一秒内显示。

我在不使用 javascript 的情况下达到了以下状态，但我不知道如何让这两个图像消失并为文本 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/

Answer 1

尝试以下代码示例。

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>