CSS Interview Question 3

CSS Interview Question 3

by misostack

HTML

<h1>The transition-property Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div class="div-width"></div>


<div class="div-height">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo architecto quo, asperiores labore quis hic repellat. Ab iure, ullam voluptate maiores reprehenderit quam, assumenda consequatur labore perspiciatis totam hic illo.</p>
</div>

CSS

.div-width {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 20px;
  transition: width 2s;
}

.div-width:hover {
  width: 300px;
}

.div-height {
  width: 100px;
  overflow: hidden;
  background: green;
  transform: scaleY(0.1);
  transform-origin: top;
  color: green;
  transition: transform 2s ease-out;
}

.div-height:hover {
  max-height: 400px;
  color: black;
  transform: scaleY(1);
}