【CSS】transitionとtransformの簡単な使用例

よく使うtransitionとtransformにつていまとめてみる

transitionとtransformは動きのあるWebサイトを作成するときに頻出するCSSプロパティだと思います。サンプルコードをコピペしたりすることが多く、まったく頭に残っておらず、たびたびググったりして面倒なプロパティだと感じたので、ここにまとめておきます。

先日自分のポートフォリオページを修正しているときに何度も使用しましたが、jQueryのclassCssと併用できない部分の修正などは、なかなか先が長そうです。https://tomohiro.site/プロフィール

ちなみにanimationプロパティも動きのあるWebサイト構築の時にループさせたいところに使ったりします。今回は割愛します。

マウスホバー時に画像が首を捻ったような動き

.image {
transition: transform 0.3s;
}

.image:hover {
transform: rotate(10deg);
}

transition: transform 0.3s; →移動する時間を指定
transform: rotate(10deg); →移動する傾きを指定

ベンダープレフィックスは付けない

毎回、ブラウザの対応状況などを確認するのが面倒なので一応メモ書きしておきます。