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

Question

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

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

Права знает, у меня эта ужасный яваскрипта функции:

<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; 
} 

Важно, как скрытый, этот элемент вообще не занимает места. I created a JSFiddle, чтобы провести вполне тесты.

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

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

Answer 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>

Если вы хотите, чтобы исчезнуть, вы используете opacity. Если вы включите задержку, вам также понадобится 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 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    } 
 
}

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

Оба примера использует animation-fill-mode, который может содержать визуальное состояние такого элемента после того, как анимация заканчивается.

Answer 2

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

here's ссылка на которые являются Animatable свойства

видимости является анимируемой пока дисплей не ...

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

fiddle with opacity animation

Answer 3

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

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

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

Удачи вам!

Answer 4

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

@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>

Answer 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