最終更新日：2022.05.23 [月]　公開日：2020.06.16 [火]　カテゴリー：html・CSS・jQuery・JS備忘

transitionアニメーションについてまとめました！ ちょっとしたボタンのマウスオーバーなど、簡単な部分に使うことも多く、すぐに忘れてしまうので、コピペできるように（備忘）。

transitionプロパティ

transition-property	アニメーションを適用させるプロパティを使用します。all（全部、初期値）・none（なし）・プロパティ名で設定。
transition-duration	変化にかかる時間。
transform-origin	アニメーションの起点を指定。transform-origin:X方向（leftやrightやcenterや%など）,Y方向（topやbottomやcenterや%など）;で指定。初期値は50% 50%。
transition-timing-function	変化前・変化後の間の動きの速度などの変化（詳細は後述）

    .test1{
    width:150px;
    height:150px;
    background-color: #000;
    transition-property: background-color;/背景カラープロパティを変化させる。カンマ区切りで複数指定も可*/
    transition-duration:2s;/*２秒かけて*/
    transition-timing-function:linear;
    }
    
    .test1:hover{/*マウスオーバーで変化*/
    width:150px;
    height:150px;
    background-color: #f00;
    

.test1の結果（マウスオーバーしたら変化）

transition-timing-functionの設定の詳細

これは設定によっていろんな動きがあります。わかりやすいようにいろいろ設定。 グレー枠内にマウスオーバーすると、同時に動きます。

.test{
background-color: #333;
width:300px;
transition-property: width,background-color,color;
transition-duration:2s;
color:#fff;
font-size:12px;
line-height:1.6;
padding:5px;
transition-timing-function:linear;/*この部分の設定についての説明です*/
}
    
.test:hover{
width:600px;
background-color: #ccc;
color:#000;
}
 

最後のtransition-timing-function:cubic-bezierはとても難しいのですが、この設定を視覚的に見ながら設定したいときはブラウザの検証ツールなどがわかりやすいです。
Firefoxだと、右クリック要素の調査、chromeだと検証です。
これだとかなりわかりやすいので、思った動きを作りやすいかと思います。

そして、サンプル通り、少し複雑な動きを加えられます。

transitionをまとめて指定できる

transitionプロパティは一括でまとめて指定できます。

transition: [transition-propertyの内容] [transition-durationの内容] [transition-timing-functionの内容] [transition-delayの内容] といった指示になります。

  transition: background 0.2s linear 1s , width 0.3s;

と言う感じです。 カンマ区切りで複数の指定可能です。

transformのいろいろな動きの設定

translate：移動させる

背景や色、普通のスタイルシート で設定してること以外に、その要素の大きさや角度など、形を変えるプロパティです。 つまり、その名の通り、変形させます。 3D的な移動もあるのですが、これはちょっと難しいので今回は割愛。

transform:translateX();

.box1{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
}

.box1:hover{
transform:translateX(80px);
background-color:#f00;
}

サンプル：マウスオーバーで動きます↓

transform:translateY();

.box2{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
}

.box2:hover{
transform:translateY(80px);
background-color:#0F0;
}

サンプル：マウスオーバーで動きます↓

transform:translate();

.box3{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
}

.box3:hover{
transform:translate(80px,100px);
background-color:#00F;
}

サンプル：マウスオーバーで動きます↓

rorate：回転させる

.box4{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
}

.box4:hover{
transform:rotate(200deg);/*回転角度*/
background-color:#00F;
}

サンプル：マウスオーバーで動きます↓

scale：サイズ変更

scaleX

.box5{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box5:hover{
transform:scaleX(2);
background-color:#FF0;
}

サンプル：マウスオーバーで動きます↓

scaleY

.box6{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box6:hover{
transform:scaleY(0.3);
background-color:#0FF;
}

サンプル：マウスオーバーで動きます↓

scale

.box7{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box7:hover{
transform:scale(3,0.2);
background-color:#F0F;
}

サンプル：マウスオーバーで動きます↓

skew：傾斜

skewX

.box8{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box8:hover{
transform:skewX(-50deg);
background-color:#066;
}

サンプル：マウスオーバーで動きます↓

skewY

.box9{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box9:hover{
transform:skewY(70deg);
background-color:#606;
}

サンプル：マウスオーバーで動きます↓

skew

.box10{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box10:hover{
transform:skew(70deg,-20deg);
background-color:#660;
}

サンプル：マウスオーバーで動きます↓

transformは複数まとめて指定できる：順番によって動きは変わる！

box11とbox12はtransformで指定する順番が違うだけですが。動きが異なります。

    .box11{
width:150px;
height:150px;
background-color: #000;
transition-property: transform,background-color;
transition-duration:2s;/*２秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box11:hover{
transform:rotate(50deg) translateX(200px);
background-color:#660;
}

サンプル：マウスオーバーで動きます↓

サンプル：マウスオーバーで動きます↓