<div class="container">
  <div class="box bi">双方向の変化（ゆっくり変化しゆっくり戻る）</div>
  <div class="box uni">一方向の変化（ゆっくり変化し即座に戻る）</div>
</div>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  >.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    margin: 8px;
    padding: 8px;
    color: white;
    
    &.bi {
      background-color: red;
      transition: all 1s;
      
      &:hover {
        background-color: blue;
      }
    }
    
    &.uni {
      background-color: red;
      &:hover {
        background-color: blue;
        transition: all 1s;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.