【CSS】簡単な要素の移動アニメーションサンプル

2018年1月16日CSSCSSアニメーション

CSSで要素の奥行回転アニメーションを実装します

回転させる要素、今回は簡単な正方形をCSSで描きます

.square{
  width: 100px;
  height: 100px;
 background:red;
}

 

アニメーション時間をtransitionで指定して(単位はs-秒)マウスホバー時に実行するあニメーションを設定します

.square{
  width: 100px;
  height: 100px;
 background:red;
  transition: 1s;
  -webkit-transition: 1s;
}

.square:hover{
  transform: translateX(300px);
}
 

 

 

translateYでY軸での移動になり、translateXでX軸での移動になります

単位はpxや%での指定が可能です

 

他の要素を変更したり追加して遊びます

.square{
  width: 100px;
  height: 100px;
 background:red;
  transition: 10s;
  -webkit-transition: 1s;
}

.square:hover{
  background:blue;
  transform: translateX(300px);
}

 

要素の移動アニメーションサンプル

※こちらではマウスホバーではなくクリック(タップ)時のアクションとしてあります

See the Pen Move element css Animation by yochans (@yochans) on CodePen.

スポンサーリンク

2018年1月16日CSSCSSアニメーション

Posted by Yousuke.U