0

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.

Community
  • 1
  • 1
Romain Braun
  • 3,624
  • 4
  • 23
  • 46
  • yes, you can't remove the element from display through css animation, whereas you can create an illusion like that.. check this link http://snook.ca/archives/html_and_css/css3-animation-proposal for more details.. – Aru Oct 15 '14 at 06:14
  • 1
    possible duplicate of [CSS3 Animation and Display None](http://stackoverflow.com/questions/13037637/css3-animation-and-display-none) – Alex Guerrero Oct 15 '14 at 06:16
  • @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 Oct 15 '14 at 06:18
  • 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](https://api.jquery.com/fadeOut/) – Alex Guerrero Oct 15 '14 at 06:22
  • 1
    @AlexGuerrero Yup, sorry, read that wrong. I ended up using a transition between width:auto and width:0. Anything but jQuery fadeOut! – Romain Braun Oct 15 '14 at 06:24

1 Answers1

1

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/

Cuzi
  • 1,026
  • 10
  • 16
  • Yes, thank you. I went with the second solution. Too bad there isn't anything more clean right now! – Romain Braun Oct 15 '14 at 07:23
  • play with the properties. i don't know how your page look to recommend the best solution for you, but if it give the user better experience you can consider to use jquery slideToggle() function: http://api.jquery.com/slidetoggle/ – Cuzi Oct 15 '14 at 07:28
  • 1
    Oh I'd rather die than using jQuery animations, but thank you :) – Romain Braun Oct 15 '14 at 07:53