CSSだけで要素の斜め移動アニメーションサンプル

a

CSSで実装する要素を斜めに移動させるアニメーションです
transitionでアニメーション時間を設定して、マウスホバー時にtransform:translate(x,y)でポジションを変更しています

HTML

<p class="square A">a</p>

CSS

.square{
  width: 100px;
  height: 100px;
  background: #3399ff;
  transition: 1s;
  -webkit-transition: 1s;
  margin:10px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.A:hover{
  transform: translate(200px,200px);
}