I will make a minimal example:

input, div { display: none; } label:before { content: 'Показать'; } #toggle:checked + label:before { content: 'Скрыть'; } #toggle:checked ~ div { display: block; } 
 <input type="checkbox" name="toggle" id="toggle" /> <label for="toggle"></label> <div>Скрытый контент</div> 

The question is about display: none , so there is no way to offer transparency and zero-height methods instead of this property. An animation can of course contain opacity , height , width , transform and other styles. With the help of JS, especially with the help of jQuery, this is also easily implemented, but the question is exactly the CSS.

If not, share what you use and why? For example, when hiding and displaying detailed information or text cropping.

  • 3
    the display property cannot be animated, it is not numeric, how do you imagine its animation? And all the smooth hiding, including "using JS, especially using jQuery" just happen through the animation of transparency, height, etc. and installation display: none at the end of the animation - Vadim Leshkevich
  • @VadimLeshkevich I know, at least one, a solution for smoothly animating the appearance or concealment of an element in this design with the help of keyframes . By the way, I didn’t offer to animate the property itself, that it works like a "toggle switch" everyone knows perfectly well. I was more interested in implementation ideas. - Alexey Giryayev
  • as you did not offer, if you wrote: The Вопрос именно про display: none, поэтому способы прозрачности и нулевой высоты не предлагать. ? Using keyframes or js doesn’t matter, the point is that the numerical value of transparency, size or position is still animated. And, if то, что оно работает как "тумблер" все прекрасно знают - what then is the question? - Vadim Leshkevich
  • The idea was that the element should have display: none , since almost all decisions of a detailed kind are to remove the display and hide it with the help of opacity and height , to which the animation is screwed without much difficulty. The question is how to make a smooth appearance when the element has a switch from display: none to display: block . - Alexey Giryayev
  • Question added a little, so there was no confusion. - Alexey Giryayev

1 answer 1

"The question is how to make a smooth appearance when the element has a switch from display: none to display: block." Example from display: none to display: block with the keyframes method:

 input { display: none; } label:before { content: 'Показать'; } #toggle:checked + label:before { content: 'Скрыть'; } #toggle:checked ~ div { animation-name: open; animation-duration: 2s; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 0s; } #toggle:not(:checked) ~ div { display: none; } @keyframes open { 0% { display: block; opacity: 0; visibility: hidden; } 100% { display: block; opacity: 1; visibility: visible; } } 
 <input type="checkbox" name="toggle" id="toggle" /> <label for="toggle"></label> <div>Скрытый контент</div> 

PS: I personally use the toggle method on JS / jQuery - adding / removing an additional class and combining it with CSS as I want. If on pure CSS, this is an example. The rest depends on the idea, the specifics of what and how is needed, the method of implementation is the second question.

  • I, for example, would be happy to help you with a reputation, but the author of the question unequivocally wrote that the option with zero height is not considered. And you still offer zero height: ( - humster_spb
  • Ok. I'll fix it soon. - Vladimir Rodichev pm
  • I deleted your request from the answer, thereby helping you not to earn more minuses, to which it would undoubtedly lead. Moreover, regardless of the quality of the answer. - 0xdb pm
  • @ 0xdb Thank you. I edited the code, made an example with a keyframe. ;-) - Vladimir Rodichev
  • @humster_spb Noble friend, I edited my answer. Now he is in the subject. - Vladimir Rodichev