Title: Why does animating opacity with the animation property work when the initial state is using `display: none`?
Tags: html;css;css-animations
Question: Using animation
The following animates the opacity of .child when it's initially set to display: none;.
body {
margin: 0;
@keyframes fadeOut {
to {
opacity: 0;
.wrapper {
width: 100vw;
height: 100vh;
.wrapper .child {
width: 200px;
height: 200px;
background-color: red;
display: none;
.wrapper:hover .child {
display: block;
animation: fadeOut 1s ease forwards;
<div class="wrapper"&gt;
<div class="child"&gt;
</div&gt;
</div&gt;
Attempting to use transition instead of animation does not work.
Using transition
body {
margin: 0;
@keyframes fadeOut {
to {
opacity: 0;
.wrapper {
width: 100vw;
height: 100vh;
.wrapper .child {
width: 200px;
height: 200px;
background-color: red;
display: none;
.wrapper:hover .child {
display: block;
transition: opacity 1s ease;
opacity: 0;
<div class="wrapper"&gt;
<div class="child"&gt;
</div&gt;
</div&gt;
How does this work in the animation case and why does this not work in the transition case?
Comment: https://stackoverflow.com/questions/32481972/transition-not-working-when-changing-from-display-none-to-block

Comment: @disinfor thank you, that is what I was looking for

Comment: And more about animations from here: https://tympanus.net/codrops/css_reference/keyframes/  _"The main difference is that while transitions trigger implicitly when property values change (for example, when a property value changes on hover), animations are explicitly executed when the animation properties are applied."_

Here is the accepted answer: Adding as an answer to aid in future visitors.
From this link: https://tympanus.net/codrops/css_reference/keyframes/ here is the relevant portion:
"The main difference is that while transitions trigger implicitly when property values change (for example, when a property value changes on hover), animations are explicitly executed when the animation properties are applied."
This is an important distinction between transition and animation.
Here is a related answer about display: none and transitions after display: block has been set (as posted in the comments from user David): Transition not working when changing from display none to block


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:09/09/19', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><css-animations>', 'Title': 'Why does animating opacity with the animation property work when the initial state is using `display: none`?', 'ViewCount': 35, 'id': 57858599, 'user_AboutMe': '<p>If you wish to make apple pie from scratch, you must first create the universe.</p>\n<p>-- Carl Sagan</p>\n', 'user_AccountId': 2156720.0, 'user_DisplayName': 'Raphael Rafatpanah', 'user_Reputation': 17943.0, 'user_Views': 1639.0, 'user_id': 1911755.0}}