アプリ 映像トレーニング 再開
2013/3/19 20:55 | Category アプリ開発実践フェーズ | Comment (0)
途中で行けなくなっていたアプリ開発 映像トレーニングを再開。
2.2. CSS3の特徴
sample2.html
●拡大
transform:
sample3.html
●角丸
border-radius:
sample4.html
border-radius:50%; /* %だと、楕円みたいなる */
sample5.html
CSS3 : キーフレーム
方法はだいたい理解したので、
落ち着いた所で、ひとつひとつ、静止画で分解してみよう！
animation-name: loading;
@-webkit-keyframes loading{
0%{ -webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
20%{ -webkit-transform: rotateY(30deg) rotateX(10deg) scale(0.9); opacity:0.6; }
40%{ -webkit-transform: rotateY(40deg) rotateX(20deg) scale(0.9); opacity:0.5; }
50%{ -webkit-transform: rotateY(0deg) rotateX(10deg) scale(1.0); opacity:0.4; }
60%{ -webkit-transform: rotateY(40deg) rotateX(10deg) scale(0.9); opacity:0.5; }
80%{ -webkit-transform: rotateY(30deg) rotateX(20deg) scale(0.9); opacity:0.6; }
100%{-webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
}
●JavaScriptの概要