CSS3 アニメーション - ポインポイン

プログラミング

CSS3について

従来のCSSは配色とか形をデザインしかできなかったが、
新しく加わったCSS3は動きをデザインできる。(例：変形、移動、変色)

サンプル

文字が上下に動くサンプル

<html> 
    <head> 
        <title>Hello PoinPoin!</title> 
        <style type="text/css"> 
            @-webkit-keyframes PoinPoin {
                50% {-webkit-transform: translate(0px, 80px);}
            }
            p {
                -webkit-animation-name: PoinPoin;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: infinite;
                -webkit-transition-timing-function: ease-in;
            }
        </style> 
    </head> 
    <body> 
        <p>Hello PoinPoin!</p> 
    </body> 
<html>

説明

@-webkit-keyframe PoinPoin

で動作の共通項が作れる。

-webkit-animation-name: PoinPoin

で簡単に呼び出せる。継承。

参考サイト

http://black-flag.net/css/20101126-2011.html
webkit-keyframeとかcss3の基本ルールを学んだ。
http://www.the-art-of-web.com/css/timing-function/
webkit-transition-timing-functionのオプションを学んだ

注意点

ブラウザの識別子を付けなくてはならない。

-webkit-*   /* Webkitエンジン(Chrome, Safari) */
-moz-*      /* Firefox */
-o-*         /* Opera */