要素をスライド（横移動）させるCSSアニメーションサンプル集

2020-01-142020-01-15CSS アニメーションサンプル集,CSS

文字や要素をスライド（横移動）表示するCSSアニメーションのパターンサンプル集です。

このページでは各アニメーションにanimationプロパティと@keyframes（キーフレーム）を使ったサンプルコードを紹介しています。

1. transformプロパティ translateX()について
2. 要素のスライド（横移動）アニメーション基本パターン
3. スライド（横移動）アニメーションを完了場所で停止させる
4. スライド（横移動）のアニメーション速度を変更する
5. スライドアニメーションで作る流れるテキストのCSSサンプル
6. スライドアニメーションで作るシンプルなスライドメニューのCSSサンプル

transformプロパティ translateX()について

CSSアニメーションでの横（x軸）移動はtransformプロパティでtranslateX()に移動距離の値を指定して実装します。
要素は初期位置から指定した移動距離値の分だけ移動しますが、これはpositionではないので注意です。

transform: translateX(移動距離);

移動距離にはpxや相対値（%）での指定が可能です。

%での指定の場合はtranslateX()の仕組み上、そのままでは自身のwidth以上は移動できないので親要素なども対応させる必要があります。

要素のスライド（横移動）アニメーション基本パターン

シンプルな最低限の記述のみで実装する要素のスライド（横移動）アニメーションのパターンサンプルになります。

この動作サンプルは右下の「Rerun」を押すと再始動します。

See the Pen CSS Slide animation 1 by yochans (@yochans) on CodePen.

<div class="box"></div>

.box{
  width:100px;
  height:100px;
  background:#0091EA;
  animation: anim 1s;
}

@keyframes anim {
  0% {
  transform: translateX(0px);
  }

  100% {
  transform: translateX(300px);
  }
}

キーフレーム（@keyframes）の0%はシンプルな一方方向のアニメーションであれば省略も可能です。

スライド（横移動）アニメーションを完了場所で停止させる

animation-fill-modeまたはanimationプロパティにforwardsを指定する事でキーフレームの完了時（サンプルでは100%時）の状態で要素は停止します。

See the Pen CSS Slide animation basic2(end stop) by yochans (@yochans) on CodePen.

.box{
  width:100px;
  height:100px;
  background:#0091EA;
  animation: anim 1s forwards;
}

@keyframes anim {
  0% {
  transform: translateX(0px);
  }

  100% {
  transform: translateX(300px);
  }
}

また他の方法として要素のセレクタに初期位置として100%時と同じ値を指定しておくことで完了場所で停止させる事も可能です。
サンプルの場合、「transform: translateX(300px);」を.boxにも指定する。
この場合、初期位置となるキーフレームの0%は省略できません。

スライド（横移動）のアニメーション速度を変更する

スライド（横移動）のアニメーション速度は、animationプロパティに指定しているアニメーション時間（animation-duration）と開始から完了までの移動距離で変化します。

移動距離が長い場合、同じアニメーション時間でも相対的に移動速度は早くなります。

以下は同じアニメーション時間(2s)で移動距離が100pxと500pxの違いがあるふたつのCSSアニメーションの比較サンプルです。

See the Pen CSS Slide animation basic2(test) by yochans (@yochans) on CodePen.

スライドアニメーションで作る流れるテキストのCSSサンプル

See the Pen CSS Flowing Text Animation1 by yochans (@yochans) on CodePen.

<div><p class="text">流れる文字のCSSアニメーション</p></div>

div{
  background:#01579B;
  width:100%;
  height:200px;
  overflow: hidden;
}

.text{
  font-size:2em;
  color:#FFF;
  animation: flowing 5s linear infinite;
  transform: translateY(200px);/*初期位置*/
}


@keyframes flowing {
  100% {
    transform: translateY(-200px);
  }
}

流れる文字のCSSサンプルは以下のページにてまとめてありますので宜しければ。

流れる文字のCSSアニメーションサンプル集

CSSだけで流れる文字を作成するCSSアニメーションサンプルパターン集になります。共通HTML <div> ...

https://1-notes.com/css-flowing-text-animation/

スライドアニメーションで作るシンプルなスライドメニューのCSSサンプル

これだけならanimationプロパティでなくtransitionプロパティで作った方が簡単で記述も少なくて済みますが、こちらはanimationと@keyframes（キーフレーム）を使って作成するシンプルなスライドメニューのサンプルコードになります。

See the Pen CSS Slide Menu Animation by yochans (@yochans) on CodePen.

<div class="container">
  <ul>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
  </ul>
</div>

.container{
  width: 300px;
  margin:10px;
  animation: close-menu 0.3s forwards;
  background:#0091EA;
}
.container:hover{
  animation: open-menu 0.3s forwards;
}

@keyframes open-menu {
  0% {
    transform: translateX(-315px);
  }
  100% {
    transform: translateX(-20px);
  }
}

@keyframes close-menu {
   0% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(-315px);
  }
}

/*リスト部分*/
ul{
  list-style-type: none;
  padding: 0;
}

li a{
  display:block;
  width:100%;
  padding:4px 12px;
  font-size:14px;
  color:#FFF;
  background:#0091EA;
  text-decoration:none;
  border-bottom: solid 1px #FFF;
}

li a:hover{
  background:#00a5ea;
}

マウスカーソルが離れた際に瞬間的に初期値に戻らないようcloseというアニメーションキーフレームも作っています。

背景色はaタグに対して指定しています。

CSS アニメーションサンプル集,CSS

Posted by Yousuke.U