Pure CSS animation visibility with delay

Refresh

November 2018

Views

45.3k time

14

I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not.

I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility (which I use often in my transition).

Right know I have this terrible javascript function :

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

I tried some animation in CSS but no result ... nothing seems to work.

I have few animation in my page, but just struggling with the display: none; on animation.

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

It is important as hidden, this element does not take space at all. I created a JSFiddle to make quite tests.

My main concerne is SEO ... I don't think the JS option is really nice for that which is why I would like a pure CSS alternative. Also interested to test those animations and see where are those limits (Am I seeing one right now ?). Kinda having fun on such challenge.

Thanks for reading, hope someone has an answer.

5 answers

1

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

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

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

Удачи!

24

Вы правы, думая , что 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, который может содержать визуальное состояние такого элемента после того, как анимация заканчивается.

Oka
4

Вы можете играть с delayподпоркой анимации , просто установить 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>
1

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

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

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

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

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

2

Использование 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; }
}

скрипка

Leo