CSS3 opacity animation + display:none

Question

I tried to implement a CSS3 animation fading out an element then applying a display:none to it, I found the idea on this SO question : Animation CSS3: display + opacity

.step2 .user-input {
    animation: hideThat 1s forwards;
}

@keyframes hideThat {
    0% { opacity: 1; display: block; }
    99% { opacity: 0; display: block; }
    100% { opacity: 0; display: none; }
}

(All vendor prefixes were removed for clarity.)

The opacity transition works, but the display:none isn't applied. I don't see what I'm doing wrong here.

yes, you can't remove the element from display through css animation, whereas you can create an illusion like that.. check this link snook.ca/archives/html_and_css/css3-animation-proposal for more details.. — Aru
@AlexGuerrero How could it possibly be a duplicate when I'm mentioning myself that I tried to apply the solution given to that specific question and it didn't work? — Romain Braun
It's not the same question look at the link, the problem is that display property can't be animated, you can use workarounds like set height and width to 0 and overflow: none or use javascript or jQuery fadeOut — Alex Guerrero
@AlexGuerrero Yup, sorry, read that wrong. I ended up using a transition between width:auto and width:0. Anything but jQuery fadeOut! — Romain Braun

Cuzi Cuzi · Accepted Answer · 2014-10-15T07:18:35

display cannot be animated, also Aro gave you good source that explain that so ill not repeat it. but, don't lose your hope there is still a solutions for you

1st

keep with almost same behaviour and use visibility property as u can see here:

@keyframes hideThat {
    0% { height: inherit; opacity: 1; visibility: visible; }
    99% { height: inherit; opacity: 0; visibility: visible; }
    100% { height: 0; opacity: 0; visibility: hidden;}
}

you can see: http://jsfiddle.net/n1q3yubp/

2nd

as you offered here to "minimize" your element by like that:

.step2 .user-input {
    overflow: hidden;
    animation: hideThat 1s forwards;
}

@keyframes hideThat {
    0% { height: inherit; visibility: visible; }
    99% { height: 0; visibility: visible; }
    100% { height: 0; opacity: 0; visibility: hidden;}
}

you can see here: http://jsfiddle.net/n1q3yubp/1/

CSS3 opacity animation + display:none

1 Answers

1st

2nd