<div class="example-one">The font-color and bottom padding of this element change when hovered or active. This is done using the CSS:
  <pre><code>transition: color 1s ease-out, padding-bottom 1s ease-out;</code></pre>
</div>
<div class="example-two">The font-color and bottom padding of this element change when hovered or active. This is done using the CSS:<pre><code>transition-property: color, padding-bottom;
transition-duration: 1s;
transition-timing-function: ease-out;</code></pre>
</div>

<p>This CodePen demonstrates two methods to transition multiple properties on one element. The first uses the <code>transition</code> property shorthand, and the second uses individual declarations for each transition property.</p>

.example-one {
  color: black;
  padding: 5px 5px 10px 5px;
  padding-bottom: 10px;
  background-color: #ffff8d;
  transition: color 1s ease-out, padding-bottom 1s ease-out;

  &:hover,
  &:active {
    color: #d50000;
    padding-bottom: 50px;
  }
}

.example-two {
  color: black;
  padding: 5px 5px 10px 5px;
  padding-bottom: 10px;
  background-color: #ffff8d;
  transition-property: color, padding-bottom;
  transition-duration: 1s;
  transition-timing-function: ease-out;

  &:hover,
  &:active {
    color: #d50000;
    padding-bottom: 50px;
  }
}

// Styling the page
body {
  font-family: sans-serif;
}

div {
  margin-bottom: 30px;
}