CODEWITHSUNDEEP
htmlcssanimation
Romain Braun
Romain Braun

Reputation: 3684

CSS3 opacity animation + display:none

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.

Upvotes: 0

Views: 1640

Answers (1)

Cuzi
Cuzi

Reputation: 1026

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/

Upvotes: 1

Related Questions