Pure CSS Animation Visibility with Delay

Pure CSS animation visibility with delay

You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations.

visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility doesn't tween between keyframes, it just steps harshly.

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

Visibility animation but a delay on the reverse effect in SCSS

You could have a different transition for .is_visible

$(window).on("load", function() {  $("button").click(function() {    $(".nav-slider").toggleClass("is_visible");  });});

.nav-slider {  position: fixed;  top: -100%;  left: 0;  width: 100%;  height: calc(100% - 60px);  background-color: $white;  z-index: 1;  visibility: hidden;  padding-top: 40px;  transition: top 2s, visibility 2s;}
.nav-slider.is_visible {  transition: top 2s, visibility 0s;  top: 60px;  visibility: visible;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="nav-slider">  test</div>
<button>slider</button>

CSS Animation and Display None

CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.

You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

CSS: animation delay on only one animation

I added a delay of 4 secs to the final animation below. For visibility purpose, I set the duration of each animation to 2 secs.

div {  width: 200px;  height: 200px;  opacity: 0.3;  background-color: darkgray;  animation:2000ms radius-in forwards, 2000ms opacity-in forwards, 2000ms 4000ms opacity-out forwards;}
@keyframes radius-in {from { border-radius: 0; }to { border-radius: 25px; }}
@keyframes opacity-in {from { opacity: 0; }to { opacity: 1; }}
@keyframes opacity-out {from { opacity: 1; }to { opacity: 0.3; }}

<div></div>

CSS delayed visibility transition doesn't trigger JavaScript transitionend event for visibility?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event:

If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

transition: visibility 0s ease-in-out 3s

Your transition-duration for visibility is 0s here.

Make that .0001s, and you'll see the transitionend event for visibility fire as well.

CSS Auto hide elements after 5 seconds

YES!

But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display, or changing dimensions and setting to overflow:hidden) in order to correctly hide the element and prevent it from taking up visible space.

Therefore, create an animation for the elements in question, and simply toggle visibility:hidden; after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.

FIDDLE

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div id='hideMe'>Wait for it...</div>

CSS transition with visibility not working

This is not a bug- you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions).

This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts.

visibility in this case is a binary setting (visible/hidden), so once the transition duration elapses, the property simply switches state, you see this as a delay- but it can actually be seen as the final keyframe of the transition animation, with the intermediary keyframes not having been calculated (what constitutes the values between hidden/visible? Opacity? Dimension? As it is not explicit, they are not calculated).

opacity is a value setting (0-1), so keyframes can be calculated across the duration provided.

A list of transitionable (animatable) properties can be found here

How to put delay in this grid animation?

You're pretty much along the right lines with your attempt to solve your issue.

If you use the code below you will get what you want, assuming I've understood your description properly. I've also created a working codepen so you can check that out.

HTML

<body>
    <div class="grid">
        <div class="grid__item">
            <span class="grid__text">facebook</span>
        </div>
        <div class="grid__item">
            <span class="grid__text">instagram</span>
        </div>  
        <div class="grid__item">
            <img class="grid__image" src="https://i.imgur.com/YEm0MAO.png">
        </div>
        <div class="grid__item">
            <img class="grid__image" src="https://i.imgur.com/zbMfFay.png">
        </div>
    </div>
</body>

SCSS

body {
    background-color: black;
}

.grid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(2, 200px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    &__item {
        display: grid;
        place-content: center;
        overflow: hidden;

        & > * {
            opacity: 0;
            animation: show-text-down 8s infinite;      
        }

        &:nth-child(2) {
            & > * {
                animation-delay: .5s;
            }
        }

        &:nth-child(3) {
            & > * {
                animation-delay: 1s;
            }
        }

        &:nth-child(4) {
            & > * {
                animation-delay: 1.5s;
            }
        }
    }

    &__text {
        font-family: Roboto, Arial, sans-serif;
        font-size: 22px;
        color: white;
    }

    &__image {
        width: 30px;
        height: 30px;
    }
}

@keyframes show-text-down {
    0%, 10% { opacity: 1; transform: translate3d(0, -100%, 0); }
    30%, 60% { opacity: 1; transform: translate3d(0, 0, 0); }
    90%, 100% { opacity: 1; transform: translate3d(0, -100%, 0); }
}

Pure CSS Animation Visibility with Delay