CSS3 FOR
TOMORROW
- CSSアニメーション-
M高津戸壮
0 / 0
M高津戸壮
高津戸 壮といいます
HTML/CSSコーディングや、
JavaScriptによるUI実装を主な仕事にしています。
CSS3のアニメーション機能をご紹介します。
本日紹介する内容は、主としてAppleが提案し、採用の検討が進められている項目が殆どです。現状、CSSアニメーションの実装が進んでいるブラウザはSafari, Google Chromeになるため、このプレゼンテーション内では、webkitのvendor prefixを付けた形でご紹介させていただきます。
div{
transition : all .5s; /* CSS3 */
-webkit-transition : all .5s; /* webkitの独自実装 */
}ちなみにこのスライドは
CSS3とJavaScriptで作られています。
値の変化が起こるとき、
アニメーションを付けることができます。
transition = 移り変わり，移行, 変化
マウスオーバーで背景色が変化。
これは <a href="#">リンク</a> です。a{
background-color: #ff0000;
}
a:hover{
background-color: #00ff00;
}transitionをつけてみます。
これは <a href="#">リンク</a> です。a{
background-color: #ff0000;
-webkit-transition: background-color 1s;
}
a:hover{
background-color: #00ff00;
}classを付け変えることでも変化。
img{ -webkit-transition:all 0.5s; }
img.dietOk{ width:100px; height:300px; }
img.normal{ width:250px; height:250px; }
img.dietNG{ width:800px; height:200px; }
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
CSSだけで手軽に
アニメーションが可能に。
transform = 変形
-webkit-transform: translateX(400px)
-webkit-transform: translateY(-200px)
-webkit-transform: scale(2)
-webkit-transform: rotate(30deg)
-webkit-transform: skew(30deg);
組み合わせも可能。
img{
-webkit-transform: translateX(400px) rotate(330deg) scale(1.5);
}transitionと組み合わせると…
div img{ -webkit-transition: all 0.5s; }
div:hover img{
-webkit-transform: translateX(400px) rotate(330deg) scale(1.5);
}要素の配置が自由自在に。
より複雑なアニメーションが手軽に。
/* アニメーションを定義 */
@-webkit-keyframes 'pigeon1' {
from{ -webkit-transform: translateX(0); }
33%{ -webkit-transform: translateX(10px); }
66%{ -webkit-transform: translateX(-10px); }
to{ -webkit-transform: translateX(0); }
}
img{
-webkit-animation-name: 'pigeon1'; /* アニメーション名を指定 */
-webkit-animation-iteration-count: infinite; /* 回数：無限 */
-webkit-animation-duration: 0.1s; /* 0.1秒で */
}@-webkit-keyframes 'menuReveal' {
from{
opacity:0;
-webkit-transform: translateY(3em);
}
to{
opacity:1;
-webkit-transform: translateY(0);
}
}
ul{
-webkit-animation-name: 'menuReveal';
-webkit-animation-iteration-count:1; /* 1回 */
-webkit-animation-duration:1s;
}
ul li{
-webkit-animation-name: 'imgReveal';
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes 'imgReveal' {
from{ opacity: 0; -webkit-transform: translateY(-100px); }
to{ opacity: 1; -webkit-transform: translateY(0); }
}＋JavaScriptで0.1秒おきにimgを作成
@-webkit-keyframes 'tagFall' {
from{ -webkit-transform: translateY(0) rotate(0) scale(0) skewY(0); }
30%{ -webkit-transform: translateY(0) rotate(-720deg) scale(.5) skewY(0); }
93%{ -webkit-transform: translateY(600px) rotate(0) scale(4) skewY(0); }
to{ -webkit-transform: translateY(600px) rotate(0) scale(4) skewY(90deg); }
}
a:hover{
position:relative; color:#fff; background:#000;
}
a.animate{
-webkit-animation-name: 'tagFall';
-webkit-animation-iteration-count:infinite;
}
a.animate:hover{ -webkit-animation-play-state:paused; }＋JavaScriptで -webkit-animation-duration をずらして指定
細かいアニメーションも自由に！
JavaScriptでもアニメーションできるし…
jQuery！
$('#animationTest').click(function(){
$('#box').animate({
left: '400px'
},1000);
});裏では時間間隔を空けながらスタイルを指定しています。
・・・
box.style.left = "300px";
box.style.left = "301px";
box.style.left = "302px";
box.style.left = "303px";
box.style.left = "304px";
box.style.left = "305px";
box.style.left = "306px";
・・・ライブラリを使えば簡単にできますが、実はかなり原始的な方法。
transitionが使えれば、classを変えるだけ。
後はブラウザがよしなにやってくれます。
$('#animationTest').click(function(){
$('#box').addClass('toRight');
});
#box{ -webkit-transition: left 1s; }
#box.toRight{ left: 400px; }animationでも同じことができます。
$('#animationTest').click(function(){
$('#box').addClass('toRight');
});
@-webkit-keyframes 'toRight' {
from{ left:60px } to{ left:400px }
}
#box.toRight{
left:400px;
-webkit-animation-name: 'toRight';
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
}ライブラリを使えばアニメーションできますが…
自由で管理性の高い
アニメーションが可能に。
こういうのとか…
サイトで使いますか…？
Writing HTML: Lesson 17: Don't Blink
by Maricopa Center for Learning and Instruction (MCLI)
unobtrusive animation
出しゃばらないアニメーション
素敵なUIを素敵な
CSSアニメーションで。
