Как анимировать свойство отображения в css или альтернативе без использования javascript

поэтому я делаю рекламу, в которой есть анимация только с использованием css (это требование для проекта). Проблема в том, что я не могу удалить элементы с экрана, потому что свойство отображения не анимируется. Я хочу удалить элементы с экрана, потому что нужно полностью изменить сцену 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/

i.imgur.com/hHYXdbP.png

— 24.03.2019 01:23

html css image css-animations

24.03.2019 01:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

141

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

24.03.2019 01:18

Другие вопросы по теме

Скрыть элемент внешнего узла при наведении

Flex wrap - складывать ряды без растяжения?

Несоответствие в списке параметров стиля по сравнению с полем ввода

Как разделить вид на 2 столбца с помощью css

Как установить максимальный масштаб изображения во всех направлениях? (рабочий стол/телефон)

Устранение неполадок при создании раскрывающегося списка из SVG: использование наведения для открытия меню

Как превратить этот javascript в jQuery

Как заставить фон элемента переключать флажок, используя только HTML и CSS?

Как сделать круглые бордюрные углы (не закругляющие углы)

Отображение: None в @media действует глобально

Как анимировать свойство отображения в css или альтернативе без использования javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы