Чистая видимость анимации CSS с задержкой

Я пытаюсь реализовать некоторую анимацию onLoad без Javascript. JS легко, CSS... нет.

У меня есть div, который должен быть на display: none; и должен быть display: block; через 3 секунды. Много ресурсов сказали мне, что анимация не работает с display, но должна быть с visibility (которую я часто использую в своем переходе).

Правильно знаю, что у меня есть эта ужасная функция javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $(".js_only").hide();
        setTimeout(function () {
            $(".js_only").show();
        }, 3000);
    });
</script>

Я попробовал некоторую анимацию в CSS, но никакого результата... ничего не работает.

У меня мало анимации на моей странице, но я просто борюсь с анимацией display: none;.

@-moz-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@-webkit-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }
}

.css_only {
    -moz-animation-name: showEffect;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 2.3s;

    -webkit-animation-name: showEffect;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 2.3s;

    animation-name: showEffect;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2.3s;
}

Это важно, как скрытый, этот элемент вообще не занимает места. Я создал JSFiddle, чтобы сделать довольно тесты.

Моя основная забота - это SEO... Я не думаю, что вариант JS действительно хорош для этого, поэтому я хотел бы использовать чистую CSS-альтернативу. Также интересно проверить эти анимации и посмотреть, где эти ограничения (я вижу это прямо сейчас?). Приятно развлечься с такой проблемой.

Спасибо за чтение, надеюсь, у кого-то есть ответ.

Ответ 1

Вы правы в том, что display не анимируется. Это не сработает, и вы не должны беспокоиться о включении его в анимацию ключевых кадров.

visibility технически анимируется, но кругом. Вам нужно сохранить свойство столько, сколько нужно, а затем привязать к новому значению. visibility не чередуется между ключевыми кадрами, он просто резко реагирует.

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

<div class="ele"></div>

Ответ 2

вы не можете анимировать каждое свойство,

здесь, ссылка на которую есть анимационные свойства

видимость анимативна, а отображение не...

в вашем случае вы также можете анимировать opacity или height в зависимости от вида эффекта, который вы хотите визуализировать _

скрипка с непрозрачной анимацией

Ответ 3

К сожалению, вы не можете анимировать свойство display. Полный список того, что вы можете оживить, попробуйте список анимации CSS по w3 Schools.

Если вы хотите сохранить визуальную позицию на странице, попробуйте анимировать либо ее height (которая будет по-прежнему влиять на положение других элементов), либо opacity (насколько это прозрачно). Вы даже можете попробовать анимацию z-index, которая является позицией на оси z (глубина), поместив элемент поверх нее, а затем перестроить то, что сверху. Однако я бы предложил использовать opacity, поскольку он сохраняет вертикальное пространство, в котором находится элемент.

Я обновил fiddle, чтобы показать пример.

Удачи!

Ответ 4

Вы можете играть с delay prop animation, просто установите visibility:visible после delay, demo:

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.delayedShow{
  visibility: hidden;
  animation: 0s linear 2.3s forwards delayedShow ;
}

So, Where are you?

<div class="delayedShow">
  Hey, I'm here!
</div>

Ответ 5

Используйте animation-delay:

div {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0;

    animation: fadeIn 3s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

Fiddle