transitionでアニメーションをさせてみよう
【正方形のボックスを〇に変化させたいとき】
.box:hoverに`border-radius:50%を指定。
それだけだとパッと切り替わるだけなので、変化の保管をするため
.boxに
transition-property: border-radius; transition-duration: 1s;
👆boxにtransitionで中間を補完するプロパティはborder-radiusで、
それにかかる時間は１秒だよという意味
transformプロパティを使ってみよう
ーよく使われる種類ー
・移動 transform:translate(10px, 10px); XY指定可
・回転 transform:rotate(10deg);
・リサイズ transform:scale(2,0.5); XY指定可 縦に二倍、横に半分
❕複数指定する場合は注意が必要❕
rotateの後にtranslateを指定すると、回った後に移動する。
translateの後にrotateを指定すると、移動した後に回転する。
transform-originで動きの起点を変更しよう
ーrotateまたはscaleの起点を変えるー
左上を起点にしたいとき
.box{ transform-origin:top left; }
を指定する。
❕transform-originは変形後だけに指定したいわけではないため
：hoverではなく.boxに指定する。
transition-propertyを使ってみよう
・boxのカラーをホバーしたときに変えたい
・boxに２つ以上アニメーションをつけたいとき
`.box {
width: 100px;
height: 100px;
background: orange;
transition-property: transform, background;
transition-property: all; ←すべてにアニメーションをつけたいときはall
transition-duration: 1s;
}
.box:hover {
transform: translateX(30px);
background: skyblue;
}`
🌟２つ以上transition-propertyに指定したいときはカンマ区切りにする
🌟リロードしたときに色が変わるchromeのバグは
<script> </script>のタグをボディの最下部に入れる。
scriptの中は半角空白を入れる。
transitionの時間を制限しよう
・アニメーション開始までの時間を遅らせたいとき
.box {
width: 100px;
height: 100px;
background: orange;
transition-property: transform;
transition-duration: .3s; ←アニメーションの時間（大体0.3s）
transition-delay: 1s; ←１秒遅らせる
}
.box:hover {
transform: translateX(30px);
}
transition-timing-functionを使ってみよう
・アニメーションの速度に緩急をつけたい（あんまり使うことない）
ease 規定値
ease-out 小さな部品 素早く動く
ease-in-out 大きな部品 ゆっくり動く
liner ローディングアイコンなど 等速で動いてほしいとき用
デベロッパーツールで細かい調整をしてみよう
transition-timing-functionをつけたところを開いて
スピードの編集ができる
transitiionの一括指定プロパティを使おう
・一括で指定したいとき
❕一括していの場合は順不同かつ省略可
transition-property: transform; transition-duration: .3s; transition-timing-function: ease-out;
👆このような場合は👇のように省略できる
transition: transform .3s ease-out 1s
・複数のプロパティを一括で指定したいとき
例えば上記にhoverするとbackgroundが変わる指定にする
👇カンマ区切りで追加できる
transition: transform .3s ease-out 1s, background .5s;
＠keyframesを設定してみよう
・高度なアニメーションの設定をしたいとき
１. ＠keyframesの後に好きな名前を付ける（moveなど）
２. アニメーション開始から何％経過したときにどうなってほしいかを書く
３. boxにanimation-nameを追加する。
.box {
width: 100px;
height: 100px;
background: orange;
animation-name: move;
animation-duration: 2s;
}
@keyframes move {
0% {
transform: none;
}
80% {
transform: translateX(200px) rotate(360deg);
}
100% {
transform: translateX(300px) rotate(360deg);
}
}
アニメーションを細かく制御しよう
・アニメーションが終わった後、戻らないようにする
animation-fill-mode:forwards;
・アニメーションを繰り返したいとき
animation-iteration-count:2;←２回繰り返す
animation-iteration-count:infinite;←無限に繰り返す
再生順を制御してみよう
👇全て@keyframesではなくboxにつける
・動かしたアニメーションを折り返す
animation-direction:alternate
・逆再生
animation-direction:reverse
・逆再生で折り返す
animation-direction:alternate-reverse
・すべてのキーフレーム間のアニメーションを同じにする
・animation-timing-function:liner;←ロボットのようになる
animationの一括指定プロパティを使おう
animation: move 2s infinite 1s;
animetionでまとめることができる。
時間はdurationが先でdelayが後
ふわっと色が変わるボタンを作ろう
.btn {
padding: 16px 32px;
background: hsl(200, 100%, 40%);
color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background .3s;
}
.btn:hover {
background: hsl(200, 100%, 45%);
}
ローディングアイコンを作ろう
<div class="loading"></div>
.loading {
width: 40px;
height: 40px;
border: 8px solid #ccc;
border-right-color: transparent; ←右の線を消す
border-radius: 50%;
animation: spin .8s infinite linear;
}
@keyframes spin {
0% {
transform: none;
}
100% {
transform: rotate(360deg);
}
ポップアップアニメーションを動かそう
・ふわっと出てきてふわっと消えるポップアップ
<div class="message">Hello!</div>
.message {
width: 300px;
padding: 8px 16px;
background: #2c2c2c;
color: #ddd;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
position: fixed;
right: 32px;
bottom: 32px;
animation: popup 2s forwards; ←forwardsで戻らないようにする
}
@keyframes popup {
0% {
transform: translateY(20px);
opacity: 0;
animation-timing-function: ease-out;
}
20%, 80% {
transform: none;
opacity: 1;
}
100% {
transform: translateY(20px);
opacity: 0;
pointer-events:none; ←🌟
}
}
🌟下にボタンがある場合重なった部分が押せなくなってしまうため
100%のところにpointer-events:none;と書く！