CSS トランジション（transition）

transition

フォルダ：css_sample_07

トランジションを使うとCSSプロパティが変化する際にアニメーション効果をつけることができます。

【準備】

共通で使用するindex.htmlとstyle.cssを用意し、css_sample_07 フォルダの中に入れます（共通のデータとは、CSSの基本で使用したデータです。GitHubからもダウンロードできます）
index.htmlは編集せずそのまま使います

▼style.cssへの追記

nav {
  padding: 8px 40px;
  background-color: black;
  color: white;
  transition-property: background-color;
  transition-duration: .5s;
}

nav:hover {
  background-color: dimgray;
}

上記の例では、ナビゲーションエリアにマウスをのせると、背景色が変化します。

トランジションは変化前（:hoverの指定をしていない方）の要素に指定します。nav:hover に指定するのではなく、navに記述します。

各プロパティの意味

transition-property…トランジションを適用したいプロパティ名を指定。allとするとすべてのプロパティに対して機能します。
transition-duration…どれだけの時間をかけて変化させるのかを指定。sは秒のこと。数字が大きいほど、ゆっくりと変化します。0 以下の指定をする場合、通常 0 は表記せず、.5s のように書きます。

transitionプロパティにまとめて記載することもできます（上記と同じ意味）

transition: background-color  .5s;

【応用】マウスをのせたときに画像を大きくする

変形、位置変更などを行う、transformプロパティを使って、マウスをのせたときに画像を大きくする機能を実装します。

▼index.htmlへの追記

<h2>画像拡大</h2>
<div class="expansion">
  <a href="#"><img src="images/bg.jpg" alt="画像"></a>
</div>

※画像は過去に使ったデータや手持ちの画像などを使ってください

▼style.cssへの追記

.expansion {
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.expansion img {
  width: 100%;
  transition: transform .5s;
}

.expansion img:hover {
  transform: scale(1.1);
}

各プロパティの意味

overflow　要素の内容がボックスがはみ出すときの挙動を設定します。
- hidden：ボックスに合わせて切り取ります
transform　コンテンツの形状や位置を変えます。
- scale()：要素を拡大・縮小をします
- translate()：要素の位置を変えます
- rotate()：要素を回転します

作成例：https://ngsm-syr.github.io/css_sample_07/
コード：https://github.com/ngsm-syr/css_sample_07

参考リンク