T.Yokoyamaのブログ: CSS

2013年9月30日月曜日

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】を読みました。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
HTML5のクライアント側の技術も知りたかったので読んでみました。

デザインの基礎知識、プランニングの話題が前半出てくるので
個人的に必要だったマークアップとCSSのレイアウトあたりなどの話題が
なかなか出てこないというのが気になりましたが、内容とサンプルコードが
しっかりしていたので、この本は良かったと思います。

マークアップの部分は、コンテンツの違いが説明されていますし、
スタイルの部分はレイアウトや、インターフェイスの話題が大半を占めています。
しかし、アニメーションやデザイン的な話も書かれているので
個人的に知らなかった事が書かれていて、十分でした。

少し、サンプルコードを触りましたが、物足りないので
もう一度触ってしっかり覚えたいと思います。

気になるのは、編集時のチェックが甘いのか、参考資料の番号が
なかったり、間違っていたりと、読みすすめれば分かる程度の
ことですが、ちょっと残念だったかもしれません。

2012年2月10日金曜日

CSS3でアニメーションさせる。

今日はPHPの授業で作れそうなものを探している途中に、
アニメーションを試してみました。
これは、Chromeだと動きますが、Firefox（10でも確認しましたが）だと動かないようです。

@keyframesの設定と、-webkit-animation-nameを指定することで、
スタイルを指定したElementがアニメーション
するようになります。

サンプルコードです。
sample.html

<!DOCTYPE html>
<html>
  <head>
 <meta charset="UTF-8" />
 <title>テキストアニメーション</title>
 <link rel="stylesheet" href="style.css" />
  </head>
<body>
  <h1>テキストアニメーション</h1>
  <div class="slide slide1">
 テキストアニメーション１
  </div>
  <div class="slide slide2">
 テキストアニメーション２
  </div>
</body>
</html>

style.css

.slide1 {
    position: relative;
    -webkit-animation-name: "slide";
    animation-name: "slide";

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.slide2 {
    position: relative;
    -webkit-animation-name: "slide";
    animation-name: "slide";

    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes "slide" { 
    from {
        left: 200px;
    }
    to { 
        left: -200px;
    }
}

今回のポイントは、@-webkit-keyframesです。
この属性は、要素のアニメーションの動き方を指定します。
fromが、開始位置、toが終了位置となります。

slide1、slide2両方とも、animation-name:"slide"が指定されていて、このanimation-nameで指定した名前のkeyframesでアニメーションされます。

animation-durationはアニメーションが始まって、終わるまでの時間です。1sは１秒を
表しています。これが、500msになると、500ミリ秒になります。
動きを見ていると、animation-durationはまだ使えなくて、ベンダープレフィックスが
必要なようです。

-webkit-animation-delayは、アニメーションを開始するまでの待ち時間です。
時間の指定方法はanimation-durationと同じです。

これをChromeで動かすと、左から200pxから-200pxまで移動するアニメーションが
表示されます。端まで移動した後も止まらずアニメーションします。

おもしろいなと思ったのですが、授業では使えそうにないな…。
「Chromeでしか動かない」と言っても、IEやFirefoxで動かしたりするし…。