CSS transition with visibility not working

by

This is not a bug– you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions).

This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts.

visibility in this case is a binary setting (visible/hidden), so once the transition duration elapses, the property simply switches state, you see this as a delay- but it can actually be seen as the final keyframe of the transition animation, with the intermediary keyframes not having been calculated (what constitutes the values between hidden/visible? Opacity? Dimension? As it is not explicit, they are not calculated).

opacity is a value setting (0-1), so keyframes can be calculated across the duration provided.

A list of transitionable (animatable) properties can be found here

More Related Contents:

  1. How can I transition height: 0; to height: auto; using CSS?
  2. Transitions on the CSS display property
  3. Use CSS3 transitions with gradient backgrounds
  4. Using CSS for a fade-in effect on page load
  5. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  6. How can I transition width of content with width: auto?
  7. Hover effect : expand bottom border
  8. CSS transition shorthand with multiple properties?
  9. Using CSS transitions in CSS Grid Layout
  10. Spin or rotate an image on hover
  11. Expand div from the middle instead of just top and left using CSS
  12. CSS transition auto height not working [duplicate]
  13. CSS3 Fade Effect
  14. Why can’t I animate custom properties (aka CSS variables)?
  15. CSS: Animation vs. Transition
  16. CSS transitions with calc() do not work in IE10+
  17. CSS how to make an element fade in and then fade out?
  18. Bug in CSS3 rotateY transition on Safari?
  19. CSS3 Transition – Fade out effect
  20. Flip a 3D card with CSS
  21. Less CSS: Mixins with Variable Number of Arguments
  22. Delay mouseout/hover with CSS3 transitions
  23. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  24. CSS transition between left -> right and top -> bottom positions
  25. CSS transition fade in
  26. Image moves on hover when changing filter in chrome
  27. CSS3 transitions on pseudo-elements (:after, :before) not working?
  28. webkit transform blocking link
  29. Drawing border colors during a CSS transition
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment