ドットインストールでCSS3を学ぼう#18〜#19
ドットインストールさんでCSS3を学ぶシリーズもいよいよ最終回になりました。
がんばっていきましょう♪
#18 animationを使ってみよう
#17では、transitionを使って簡単なアニメーションを作りました。
今回は、より複雑なアニメーションを作っていきましょう。
今回も、水色のボックスが用意されています。
<body>
<div></div>
</body>
cssはこんな感じです。
div{
width: 50px;height: 50px;
background: skyblue;
}
ブラウザで見るとこのようになっています。
今回は、この水色のボックスをアニメーションで動かしてみましょう。
使うのは、「animation」プロパティです。
animationプロパティはcanIuseで確認すると、ベンタープレフィックスが必要となっていますので
ドットインストールさんではChromeを使っていますので、ベンダープレフィックスは
「webkit」を使います。
-webkit-animation: slidein;
このようにすると、
水色のボックスがスライドしてくるアニメーションがつくられます。
あとは、transitionと同じような指定ができます。
-webkit-animation-duration: 1s;
これで、アニメーションにかかる時間は1秒と指定されます。
-webkit-animation-timing-function: ease;
これで、動きがなめらかになります。
-webkit-animation-delay: .1s;
これで、アニメーションが0.1秒後に始まるようになります。
続けて書くと、こうですね。
div{
width: 50px;height: 50px;
background: skyblue;
-webkit-animation: slidein;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: .1s;
}
これで、水色のボックスのアニメーションが指定されました。
ここまでできたら、アニメーションの途中の状態も指定しましょう。
それには、keyframesという指定をします。
@-webkit-keyframes slidein{
0%{
margin-left: 100%;
background: white;
}
70%{
margin-keft: 50%
background: blue;
}
100%{
margin-left: 0%
}
}
slideinというアニメーションで、
0%のときには右端にボックスがいて
70%のときには真ん中。一瞬ボックスが青になります。
100%のときには左端にきています。
これを、動画でお見せできないのが残念。
ぜひとも、ドットインストールCSS3#18をご覧になってみてくださいね。
最初は白かったボックスが青になり、
真ん中をすぎると水色になって
左端に落ち着きます。
画像だとわかりにくくて、重ね重ね残念です＾＾；
ちなみに、このアニメーションを何回も繰り返す場合には、
-webkit-animation-iteration-count: infinite;
を付け加えると、
同じ
「右から出て左に行く」というアニメーションをずっと繰り返すことができます。
「右から左」だけでなく、
「右から左」そのつぎは「左から右」そして「右から左」と繰り返す場合には、
こちらも付け加えます。
-webkit-animation-direction: alternate ;
場所はこんな感じの場所で。
div{
width: 50px;height: 50px;
background: skyblue;
-webkit-animation: slidein;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: .1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate ;
}
付け加える感じですね。
よく動き回る広告を見ることがありますが、animationプロパティで動かしているのかな？と思うと
味わい深いものがありますね。
#19 box-sizingを使ってみよう
cssのwidyhやheightを、paddingやborderを含めた値にしたいときに使う、
box-sizingについて学習します。
今回用意されているのはこんなhtmlです。
<body>
<div class="container">
</div>
</body>
わかりやすいように、marginとpaddingも0に。
body{
margin: 0;
padding: 0;
}
そして、.comtainerはこんなふうに。
.contasiner{
width: 320px;
height: 100px;
background: skyblue;
}
最初は、こんな風に表示されます。
ここに、ボックスを表示していきます。
<body>
<div class="container">
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
</div>
</body>
ボックスを3つ追加します。
ひとつひとつのボックスはこんな感じにします。
.box{
width: 100px;
height: 100px;
background: #eee;
float: left;
}
並べるために、float:left;にします。
さらに、 ボックスの間に間隔を設けます。
.box + .box{
magin: left;
}
すると、こんなふうに３つのボックスが並びます。
これに、padding とborderをつけてみたいと思います。
padding: 10px;
border-bottom: 10px solid #ccc
このようにしたいときには、
widthとheightを縮める必要があります。
width: 80px;
height: 70px;
新しく入ったpaddingと太めの下線のために、スペースをあけたようなイメージですね。
すると、このようになります。
上にゆとりができて、下に太めの線が入っていますね。
このようにpaddingやborderを追加するときには、
いちいちwidthやheightを操作しなくてはならないのですが
いちいち修正しなくてはいけないのは大変ですよね。
このようなときに使うのが、box-sizingです。
box-sizing: border-box;
このように指定すると、
.box{
box-sizing: boeder-box;
width: 100px;
height: 100px;
background: #eee;
float: left;
}
widthとheightを変更しなくても、
このとおりです。
box-sizingを使えば、毎回widthやheightをいじらなくても同じ状態をキープできます。
box-sizingを指定しておけば、borderの太さやpaddingを変えても
基本的な状態はこのまま。
便利！
使えるかどうかはわかりませんが（笑）
これで、めでたくCSS3が終わりましたので
次からは新しい単元に入っていきたいと思います！
