にゅーん（CSS） | 動くWebデザインアイディア帳

最低限おぼえておきたい動き
-にゅーん（CSS）-

デモページを見る

See the Pen 4-7 最低限覚えておきたい現れ方 - にゅーん by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

CSS アニメーションで実現する下から上に滑らかに出現する方法です。

このサンプルは、画面を開いたらすぐに動きます。
スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。

HTMLの書き方

■HTMLの要素は自由です。
指定した対象がインライン要素（例<span>タグなど）の場合はCSSでdisplay:block;を指定し、ブロック要素にしてから動かしましょう。

＜NG例＞https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/inline_smoothng/
＜OK例＞https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/inline_smoothok/

<div class="smooth">滑らかに変形して出現</div>

自作のCSS内の書き方

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}