css3 右から左への遷移 下から上への遷移

---

ヒント: システムのデフォルトでは、左から右へ、上から下へ遷移します。

1. 右から左への遷移

アイデア: 主なことは、トランジションが左側にのみ拡張できるように、右側の div を修正することです。

.ltr {
    
    
  width: 20px;
  height: 60px;
  background-color: pink;
  transition: width 2s;
  position: absolute;
  right: 0;
}

.ltr:hover {
    
    
  width: 200px;
}

レンダリング

2. 下から上への遷移

アイデア: 主なことは、トランジションが上方向にのみ拡張できるように、div を下部に固定することです。

.down-up {
    
    
  height: 20px;
  width: 160px;
  background-color: rgb(85, 180, 187);
  transition: height 2s;
  position: absolute;
  bottom: 0;
}

.down-up:hover {
    
    
  height: 200px;
}

レンダリング

この記事では、主に複数のコンテンツを配置した際の下から上または左から右への遷移を実現する応用編も書きました。興味のある方は覗いてみてはいかがでしょうか。