ベンダープレフィックス
CSS3で用意されているプロパティはブラウザによっては実験的に使われているものという認識でサポートされていない場合があります。そのため、Chromeでは反映されるけどSafariでは反映されない、IEでは反映されないという現象がおきます。
そこでベンダープレフィックスを利用してこれを解消していきます。
ベンダープレフィックスの種類
-webkit-
ChromeやSafariのベンダープレフィックスです。
-webkit-border-radius: 10px;
のように記載します
-moz-
Firefoxのベンダープレフィックスです。
-moz-border-radius: 10px;
のように記載します
-o-
Operaのベンダープレフィックスです。
-o-border-radius: 10px;
のように記載します
-ms-
Internet Explorerのベンダープレフィックスです。
-ms-border-radius: 10px;
のように記載します
サポートされていないものを表示させる方法としてCSSハックも存在しますが、
CSSハックとベンダープレフィックスの違いについて今度まとめて改めて記事にしたいと思います。
CSSでアニメーションを作る
ここでは次のhtmlを使ってまとめていきます。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition
例えばマウスオーバー時にアニメーションを加えたいときはこのプロパティを利用します。
.box {
width: 50px;
height: 50px;
background-color:#ccc;
}
先ほどのhtmlのボックスにこのようなプロパティを設定するとこうなります。
このボックスにマウスオーバーした時、ボックスの幅を広げるということは
.box:hover {
width: 100px;
height: 50px;
background-color:#ccc;
}
を使うことで可能です。
上の灰色の四角にカーソルを当ててみて下さい。
ボックスの幅が広がります。
これよりももっとスムーズに広げていきたいときはtransitionを使います。
transitionプロパティはいくつかあり、ショートハンドで記載することも可能です。
transition-property
transitionを適用するCSSプロパティを指定します。ここに指定したプロパティだけが、transitionによりアニメーションします。変化する部分全部を変えたい場合はallと記載します。
transition-duration
変化にかかる時間を指定します。単一の値を指定すると、すべてのプロパティのtransitionの所要時間として、また、複数の値を指定すると、プロパティごとにtransitionの所要時間として違う値を指定することができます。
transition-timing-function
どのように変化させるかを指定します。いくつかの値をとっていて、
- ease：開始と終了が滑らかになる
- linear：当速度で変わる
- ease-in：開始がゆっくり
- ease-out：終了がゆっくり
- ease-out：開始と終了がゆっくり
があります。
transition-delay
アニメーションが始まるまでの時間を指定します。
.box {
width: 50px;
height: 50px;
background-color:#ccc;
transition-property:all;
transition-duration:3s;
transition-timing-function:ease;
transition-delay:0.2s;
}
.box:hover {
width: 100px;
height: 50px;
background-color:#ccc;
}
上の灰色の四角にカーソルを当ててみて下さい。
先ほどとは違い、ゆっくりと右にボックスがのびていきます。
このようにtrasitionでは簡単なアニメーションをつくることができます。
animation
より複雑なアニメーションにするにはanimationプロパティを利用します。
animationプロパティはChromeのベンダープレフィックスを付けて書いていきます。
animation-name
アニメーションに任意の名前をつけるプロパティです。
このanimation-nameがついているキーフレームだけがアニメーションで反映されます。
animation-duration
変化にかかる時間を指定します。初期値は0ですが、0のままだとアニメーションは実行されません。
animation-timing-function
どのようにアニメーションを変化させるかを指定します。
取りうる値transition-timing-functionと同じです。
animation-delay
アニメーションが始まるまでの時間を指定します。
animation-iteration-count
アニメーションの繰り返し回数を指定します。
何回繰り返すかという具体的な数値を指定したり、アニメーションを無限に繰り返すinfiniteを指定したりできます。
animation-direction
反対方向に再生するかどうかを指定します。
初期値のnormalでは普通方向のみの再生でアニメーションサイクルを繰り返しますが、
alternateを指定すると奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返します。
keyframes
アニメーションの途中のうごきを指定します。
@keyframes animation-nameでつけた名前 {
0%{アニメーションが始まる時点の状態を表すcss}
0〜100%{アニメーションが始まってから終わるまでの途中の状態を表すcss}
100%{アニメーションが終わる時点の状態を表すcss}
}
.box {
width: 50px;
height: 50px;
background-color:#ccc;
-webkit-animation-name:slide;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0.2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
@-webkit-keyframes slide{
0% {
margin-left:0%;
background-color:#eee;
}
50% {
margin-left:40%;
background-color:#fff;
}
100% {
margin-left:100%;
}
}
とすると
このようになります。
これを応用することで色んな動きをだすことが可能になります。
box-sizing
次はbox-sizingについて見ていきます。
通常、ボックスのwidthを指定していてもpaddingやborder-widthが指定されていた場合は
実際に表示される要素の幅はwidthとpaddingとborderの幅を足したものになります。
例えば
width:200px; padding:0 20px; border:10px solid #000;
と指定していた場合は
200px(width)+40px(左右のpadding)+20px(左右のborder)=260px
となって表示されます。
このせいでレイアウトが崩れたりすることがあるのですが、
box-sizing:border-box;を指定することでwidth:200px;としていた場合はpaddingやborderが指定されていてもwidthは200pxとなります。
これをつかうことで段組の面倒な余白の計算が簡単になります。
ただ、box-sizingもベンダープレフィックスをつける必要があるので記載時は注意が必要です。
ということで今回は主にベンダープレフィックスとアニメーションについてのまとめでした！
