< 記事共通の特徴 >

全デモのソース一式がダウンロード可能です。
ソース一式はローカル環境ですぐに使える構成になっています。

animateを使わないスムーズモーション02
(直線出現:画面内出現)

animateを使わないスムーズモーション04
(時間差出現)


animateを使わないスムーズモーション03
(斜め直線出現)

斜め直線出現モーション

解説

用途・理由

animateによるモーションは少し処理が重いため、CSSによりモーションを設定したい。
縦・横ではなく、斜め方向からカッコ良く登場させたい。

CSSによる斜め直線移動

やり方は、animateを使わないスムーズモーション01(直線出現) と同じです。
出現前の位置設定で top/left の両方を設定すれば良いだけです。

CSSによる斜め直線移動は、下記2つのスタイル定義を用いて実現できます。
.motion_block {
  /* 移動にかける時間を設定(登場の速度) */
  -webkit-transition: all 1.6s ease;
  transition:         all 1.6s ease;
  /* 移動後の位置 */
  position: relative;
  top:  0;
  left: 0;
}
.motion_block.ready {
  /* 移動前の位置 */
  top:  600px;
  left: 600px;
}
※ transition / -webkit-transition により変化を 0/1 ではなく、漸次的にすることで、スムーズモーションを実現しています。
※ transition / -webkit-transition と同様の設定が2つあるのは、複数ブラウザ対応のためです。
※ transition / -webkit-transition の一方の設定は各ブラウザで無視されます。

スムーズモーションの実行

Javascriptにより適用されるスタイルを変化させることでモーションを実行します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.block_design').removeClass('ready');
});
</script>
※ ready クラスを削除することにより、top の設定値が 600 から 0、left の設定値が 600 から 0 になります。
※ この変化が transition / -webkit-transition 設定により漸次的に行われることから、スムーズな動きになります。

移動前の要素を非表示にする

animateを使わないスムーズモーション2(直線出現:画面内出現) に記載したように、
親要素に overflow:hidden を設定し、表示範囲を制限することで実現できます。

まとめ

上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
  <title>animateを使わないスムーズモーション3(斜め直線出現)</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
  html, body { margin: 0; padding: 0; }
  .limit_disp_inner_content {
    height: 300px;
    overflow: hidden;
  }
  .motion_block {
    /* 移動にかける時間を設定(登場の速度) */
    -webkit-transition: all 1.6s ease;
    transition:         all 1.6s ease;
    /* 移動後の位置 */
    position: relative;
    top:  0;
    left: 0;
  }
  .motion_block.ready {
    /* 移動前の位置 */
    top:  600px;
    left: 600px;
  }
</style>
</head>
<body>
  <div class="limit_disp_inner_content">
    <div class="motion_block ready">↑← Hello --</div><!-- motion_block -->
  </div><!-- limit_disp_inner_content -->
</body>
<script>
$(document).ready(function() {
  $('.motion_block').removeClass('ready');
});
</script>
</html>

animateを使わないスムーズモーション02
(直線出現:画面内出現)

animateを使わないスムーズモーション04
(時間差出現)