血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > CSS3 Animations

hosting by xrea.com

CSS3 Animations

作成:
更新:

2009年にAppleによって提案されたAnimationsがIE10 Platform Preview 3に実装された際にこの記事を書いたが、当時は筆者の手元にWin8環境がなかったため、IEでの動作確認を確認していなかった。が、当時から取り巻く環境も変わったため、追記を行った。

Animation関連プロパティの対応状況

value IE Firefox Opera(Presto) Blink(※1)
@keyframes
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

サンプル

以下のアイディアはすべてAnimatable: One property, two values, endless possiblitiesからぱくり勝手にforkしました。マウスポインタを当てれば、対応したブラウザで動作します。

1
2
3
04
5
6
7

coding

かつては4ブラウザの接頭辞を含めなければ動作しないという、スタイルシートがとんでもなく冗長になるということがあったが、時点での実装では、webkit/blinkのみ接頭辞を用意すれば良い。

@keyframesの後にキーフレーム名を記述し、アニメーション変化の仕方を記述する。0%が始点、100%が終点となる。それぞれエイリアスでfromtoのキーワードが用意されているが、今回のサンプルでは用いていない。

自然にループさせるために、0%100%に同じプロパティを用意し、50%に変化させるプロパティを記述した。また、:hover擬似クラスでマウスを置いたときにアニメーションが開始するように仕向けておき、animation-iteration-count: infinite;として、無限ループするようにしてある。animation-name@keyframesで宣言したキーフレーム名と同じ値を記述して、結びつけるような仕様となっている。

.test1:hover {
 -webkit-animation-duration: 4s;
 -webkit-animation-name: test1;
 -webkit-animation-iteration-count: infinite;

 animation-duration: 4s; /* reserved Opera */
 animation-name: test1;
 animation-iteration-count: infinite;
}

@-webkit-keyframes test1 { /* for webkit/blink */
 0% { background-position: 0% 0%; }
 50% {  background-position: 100% 100%; }
 100% {   background-position: 0% 0%; }
}

@keyframes test1 {
 0% {background-position: 0% 0%; }
 50% { background-position: 100% 100%; }
 100% { background-position: 0% 0%; }
}

.test1 {
background-color: slategray;
background-image: -webkit-linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black);
background-image: linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black);
background-size:50px 50px;
}

div.block {
 text-align:center; line-height: 150px; font-size:72px; color:white; height:150px; width:150px; float:left; margin:10px;
}
...
<div class="test1 block">
1
</div>

marqueeの代替として

HTML5では、

The marquee element is a presentational element that animates content. CSS transitions and animations are a more appropriate mechanism.

という具合で、CSS animationが適当なメカニズムである、と。というわけで?マーキーもどきを用意してみました。マウスポインタを当てれば動きます。

marqueeもどきのテスト

coding

p.marquee:hover {
 -webkit-animation-duration: 5s;
 -webkit-animation-name: marquee;
 -webkit-animation-iteration-count: infinite;

 animation-duration: 5s;
 animation-name: marquee;
 animation-iteration-count: infinite;
}

@-webkit-keyframes marquee {
 from {margin-left: 0%; width: 100%; }
 50% { margin-left: 100px; width: 100% }
 to { margin-left: 0%; width: 100%; }
}

@keyframes marquee {
 from {margin-left: 0%; width: 100%; }
 50% { margin-left: 100px; width: 100% }
 to { margin-left: 0%; width: 100%; }
}
...
<p class="marquee">
marqueeもどきのテスト
</p>

検証に使用したブラウザ

Internet Explorer
MSIE 10.0; Trident/6.0 バージョン 10.0.6 (リリース版)
Firefox
rv:21.0 Gecko/20100101 Firefox/21.0 (リリース版)
Opera(Presto)
Presto/2.12.388 Version/12.15 (リリース版)
Blink(Opera Next)
AppleWebKit/537.36 Chrome/28.0.1500.52 Safari/537.36 OPR/15.0.1147.100 (Edition Next)

仕様書とリファレンス

CSS Animations Module Level 3 WD ()
http://www.w3.org/TR/2013/WD-css3-animations-20130219/
Animations
http://msdn.microsoft.com/en-us/library/windows/apps/hh441191(v=VS.85).aspx
CSS アニメーション - MDN
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_animations
Animatable: One property, two values, endless possiblities
http://leaverou.github.com/animatable/