On gists

Transition-behavior: allow-discrete

CSS CSS trick

example.css Raw #

/* works in one direction, if both direction is needed, we need to use 
@starting-style for second direction, @see: https://www.youtube.com/shorts/xVt8Foa2u7I (Kevin Powell)


/* toggle - two 2 , starting-style needed */
/* https://jsbin.com/sokazavera/edit?html,css,output */
.txt {
	background-color: #eee;
	padding: 20px;
	margin-top: 15px;
	border-radius: 4px;
	border: 1px solid #ccc;
	display: none;
	opacity: 0;

	transition-property: all;
	transition-duration: 1s;
	transition-behavior: allow-discrete;
}
.txt.show {
	display: block;
	opacity: 1;
	@starting-style {
		opacity: 0;
	}
}


/* one way 
https://jsfiddle.net/oz6m4ctd/9/
*/

box {
  width: 20%;
  height: auto;
  aspect-ratio: 1/1;
  display: block;
  position: relative;
  transition: all 0.25s;
  transition-behavior: allow-discrete;
  opacity: 1;
  scale: 1;
}

.box.closed {
  display: none;
  opacity: 0;
  scale: 0;
  width: 0;
}