Transitions sur la propriété d'affichage CSS

98

div {    border: 1px solid #eee;  }  div > ul {    visibility: hidden;    opacity: 0;    transition: visibility 0s, opacity 0.5s linear;  }  div:hover > ul {    visibility: visible;    opacity: 1;  }

<div>    <ul>      <li>Item 1</li>      <li>Item 2</li>      <li>Item 3</li>    </ul>  </div>

83

div {     display: none;     transition: opacity 1s ease-out;     opacity: 0; } div.active {     opacity: 1;     display: block; } 

div {     transition: opacity 1s ease-out;     opacity: 0;     height: 0;     overflow: hidden; } div.active {     opacity: 1;     height: auto; } 

76

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

.parent:hover .child {     display: block;     -webkit-animation: fadeIn 1s;     animation: fadeIn 1s; } 

// We need to keep track of faded in elements so we can apply fade out later in CSS  document.addEventListener('animationstart', function (e) {    if (e.animationName === 'fade-in') {        e.target.classList.add('did-fade-in');    }  });    document.addEventListener('animationend', function (e) {    if (e.animationName === 'fade-out') {        e.target.classList.remove('did-fade-in');     }  });

div {      border: 5px solid;      padding: 10px;  }    div:hover {      border-color: red;  }    .parent .child {    display: none;  }    .parent:hover .child {    display: block;    animation: fade-in 1s;  }    .parent:not(:hover) .child.did-fade-in {    display: block;    animation: fade-out 1s;  }    @keyframes fade-in {    from {      opacity: 0;    }    to {      opacity: 1;    }  }    @keyframes fade-out {    from {      opacity: 1;    }    to {      opacity: 0;    }  }

<div class="parent">      Parent      <div class="child">          Child      </div>  </div>

62

#selector {     overflow: hidden;  /* Hide the element content, while height = 0 */     height: 0;     opacity: 0;     transition: height 0ms 400ms, opacity 400ms 0ms; } #selector.visible {     height: auto; opacity: 1;     transition: height 0ms 0ms, opacity 600ms 0ms; }