大阪府堺市のWEB制作(ホームページ制作)事務所です

[css]transitionアニメーションまとめ

最終更新日: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;/*2秒かけて*/
    transition-timing-function:linear;
    }
    
    .test1:hover{/*マウスオーバーで変化*/
    width:150px;
    height:150px;
    background-color: #f00;
    
.test1の結果(マウスオーバーしたら変化)
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:ease;
変化の始まりと終わりが速く動く

transition-timing-function:ease-in;
変化の始まりがゆっくり動く

transition-timing-function:ease-out;
変化の終わりがゆっくり動く

transition-timing-function:ease-in-out;
変化の始まりち終わりがゆっくり動く

transition-timing-function:linear;
ずっと同じスピートで動く

transition-timing-function:cubic-bezier(数値,数値,数値,数値);
カスタム設定

transition-timing-function:steps(数値,start);
開始時点で指定した数値の段階で変化

transition-timing-function:steps(数値,end);
終了時点で変化完了するように指定した数値の段階で変化

transition-timing-function:step-start;
開始時点で変化

transition-timing-function:step-end;
終了時点で変化

最後の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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
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;/*2秒かけて*/
transition-timing-function:linear;
margin:auto;
}

.box11:hover{
transform:rotate(50deg) translateX(200px);
background-color:#660;
}
サンプル:マウスオーバーで動きます↓


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

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA