ドットインストールでCSS3を学ぼう#16〜#17
ご機嫌でプログラミング学習をしています。CSS3は、見た目がわかりやすいので楽しいですね！
CSS3は全19回なので、気持ちよく終了できるように
今回は#16と#17を学習します。
#16 ベンダープレフィックスを使おう
can I useで調べてみると、実は注意書きがあるのです。
can I useで調べると、各種ブラウザで、transformが使えるかどうか見せてくれます。
すると、とくにSafariで黄色の注意書きが表示されていますよね。
「なんと、それは一大事じゃ」
日頃Safariを使っている私には、非常に重大な問題です。
注意書きのところにマウスをのせると、このような説明が出てきます。
実際に、Safariのブラウザで見てみると、ちゃんと変形されていません。
Chromeで見ると、このようになっているので
transformがSafariでは動いていないのがわかります。
さあどうしましょう！
そのような時に使うのが
「ベンダープレフィックス」です。
ベンダープレフィックスの種類
ベンダープレフィックスは、ブラウザごとに決まっています。
これを追加することで、黄色の注意書きが出ていたブラウザでも
そのプロパティが使えるみたいです。
今回はSafariで動かすので、「webkit」を使います。
このような形にするのに、オレンジ色のbox2の方は
このように記述されていました。
#box2{
background: orange;
opacity: .5;
transform: rotate(30deg);
}
中心はデフォルトのままで、30度動かしますよ、という指示になっています。
これをSafariでもこのように表示するには、
#box2{
background: orange;
opacity: .5;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
普通の命令（この場合はtransform）の前に、
ベンダープレフィックスをつけた命令をもう1行書き入れます。
すると、Safari は
-webkit-transform: rotate(30deg);
の方を見るし、
他のブラウザは
transform: rotate(30deg);
の方を見ます。
さあ、Safariで見てみましょう。
やった！ちゃんと回転しています。
CSS3はまだまだこのような点があるので、
うまく動かない時にはcan I useを確認して
ベンダープレフィックスを使って行くことが必要になります。
can I useに、「webkit」って書いてありますね！
#17 transitionを使ってみよう
次は、要素のアニメーションを作る「transition」について学びます。
今回は、簡単にdivが用意されています。
<body>
<div></div>
</body>
そして、cssでこのように指定されています。
まずは、普通の状態のdiv。
div{
width: 100px;
height: 50px
background: skyblue;
}
幅が100px、高さが50px、背景色がスカイブルーになっています。
そのボックスの上にマウスが乗ると、このようになりますよというように
指定されています。
div:hover{
width: 200px;
height: 50px;
background: blue
}
hoverというのは、CSS入門編の#06で擬似クラスについて学習した時、
「マウスがのったとき」として習いました。
通常のとき、ボックスはこのように表示されています。
マウスが乗っていないときはこう。
ボックスの上にマウスが乗るとこうなります。
hoverのことは完全に忘れていましたが、たのしいですね！
未来の乗り物として出てきた
『ホバーボード』を思い出すよね」
ホバーボードと紐づけて覚えれば、忘れない気がする…！
＊＊＊＊＊＊＊＊＊＊＊＊
さて、
このスカイブルーからブルーへの変化ですが、
マウスが乗ると一瞬で変わるのですが
この変わり方をアニメーション化しよう、というのがtransitionです。
transitionプロパティには、次のような種類があります。
transition-property （どのプロパティを指すのかを指示する）
transition-duration （変化にかかる時間）
transition-timing-function
ease （開始と終了がなめらかになる）
linear （等速度でアニメーションしてくれる）
ease-in （開始がゆっくり）
ease-out （終了がゆっくり）
ease-in-out （開始と終了がゆっくり）
transition-delay （変化が開始するまでに何秒かかるか）
これを、指定してみましょう。
最初のdivの続きに、このように記述します。
div{
width: 100px;
height: 50px
background: skyblue;
transition-property: all;
transition-duration: 2s;
transition-timing-function : ease;
transition-delay: 0.8s;
}
どのプロパティを指すのかは、幅や高さ、色がありますが「all」で全部を指定します。
変化にかかる時間は2秒。
開始と終了がなめらかになるeaseを指定して、
変化が開始するまでの時間は0.8秒です。
この指定をしたあと、
この状態からマウスを乗せると
パッと変化するのではなく、ゆっくりなめらかに変化しました！
（なにせ画像ではお伝えできなくて申し訳ないです）
とってもおもしろいので、映像をご覧になってみてくださいね＾皿＾
これは楽しい！
CSS3ではアニメーションまで指定できるのですね。
ちなみに、これらは一気に指定することもできます。
div{
width: 100px;
height: 50px
background: skyblue;
transition: all 2s ease 0.8s;
}
このように並べることもできます。
「何秒」が2個並ぶことになってしまいますが、並べて指定をしたときには
1つ目が transition-duration （変化にかかる時間）
2つ目がtransition-delay （変化が開始するまでに何秒かかるか）
の順で指定されるそうです。
アニメーションを作るtransition。
ぜひとも使えるようになりたいです♪
