隠し要素：このdivはページ上部に固定されているヘッダー分コンテンツが見れなくなってしまうのを防ぐため作成されています。

あいまいワード検索
ここに調べたい内容を書き、クリックするとこのサイト全体で検索してくれます。 Google検索のシステムを使っているので検索結果の更新には時間がかかります。

1.transition

cssで簡単なアニメーションを作る場合transitionを使います。 このプロパティでは他のプロパティを実行するまでにかかる時間などを変更してアニメーションを作ることができます。

アニメーション例

例. transition: プロパティ 所要時間 表示の方法 待ち時間;
  • transition: all 2s ease-out;
  • transition: opacity 1s ease-in-out;
  • transition: padding 3s, color 1s;
  • リセット

カーソルを合わせてクリックするとそのプロパティが実行されます。(もしかしたら環境によってはみれないかも…) transitionはボタンをホバーしたときにゆっくり色が変化するようにしたり、ゆっくりと表示させたりなどのちょっとしたアニメーション を作ることができます。表示の方法はアニメーションの速度の変化のことでいくつかあります。

linear 速度が変化しない。
ease
ease-in
ease-out
ease-in-out

2.animation

cssでアニメーションをつける方法の2つ目としてanimationプロパティがあります。

Back Home