いくつか方法があるのですが、IE11 で動くものとしては、css animation と、javascript で transform 属性をタイマーで動的に変更する方法 の、2 択になるようです。このページでは、css animation を利用する方法について解説します。
↑の例の HTML の重要な部分を抽出すると下記のようになります。
<object class="a_rotate" data="../img/manma_neko/08.svg" type="image/svg+xml"> 説明文 </object>
class
は、別ファイルで定義されている css animation と関連付けるために使用する名前です。比較的自由な文字が利用できるみたいですが、半角英数字とハイフンアンダースコアから成る名前にしておくのが無難です。
data
には、表示する svg ファイルのパスを指定します。img
タグでは src
に相当する部分です。今回は相対パス※
で指定しましたが、もちろん、絶対パスや、http: で始まる URL を指定することもできます。
※ この例では、HTMLファイルのあるフォルダーの親フォルダーにある img フォルダーの下の manma_neko フォルダーの下にある 08.svg ファイルを指定しています。
(.. は親フォルダーを表す特殊なフォルダー名です)
type
には、image/svg+xml
を指定します。data
で参照しているファイルの内容が svg であることを明示する役割があります。
説明文
は、本質的には不要ですが、img
タグの
alt
属性に相当するので、object
が表示できないブラウザーなどで特に重要です。また、SEO※
的にも有利になることが見込まれるので、必ず指定しておい方がよいでしょう。
※ SEO とは、Search Engine Optimization の略です。おおまかには、Google などの検索エンジンにより、自分のページをより多く表示させる方法を意味します。
次に、外部で定義する
css
は、下記のように、link
タグで指定します。
<link rel="stylesheet" type="text/css" href="../../animate.css">
rel
type
属性は決まり文句なので、このままで OK です。
href
属性で、css ファイルを指定します。この例では親の親フォルダーにある
animate.css
ファイルを指定しています。
link
タグは
head
タグ内に置く決まりなので、順番が前後しましたが前で述べた
object
タグよりも先に記述することになります。HTML の全体像は下記の通り。
<html> <head> <link rel="stylesheet" type="text/css" href="../../animate.css"> <title>タイトル</title> </head> <body> <object class="a_rotate" data="../img/manma_neko/08.svg" type="image/svg+xml"> 説明 </object> </div> </body> </html>
あとは、アニメーションを定義する css ファイルを用意すれば OK です。
.a_rotate { -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -ms-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg);} } @-ms-keyframes spin { 0% {-ms-transform: rotate(0deg);} 100% {-ms-transform: rotate(360deg);} } @-o-keyframes spin { 0% {-o-transform: rotate(0deg);} 100% {-o-transform: rotate(360deg);} } @keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
-webkit-
-moz-
-ms-
-o-
のプリフィックスありバージョンと無いバージョンがあって冗長ですが、現在のところ、色々と指定しておいた方がいいみたいです。
.a_animate
は
object
と紐付けるための名前で、object
の
class
属性で指定した名前の前に . を付けたものを指定します。
spin
は今回定義するアニメーションの名前なので自由な名前に変更できます。
5s
はアニメーションの周期で 5 秒を、infinite
は無限に繰り返すの意味です。
linear
は動かし方で、線形 (比例的、一定の割合) で値を変化させます。今回は、一定速度で回転させたいので
linear
を指定しましたが、他の値を指定すると最初と最後の動き出しをゆっくりにしたりできます。
@keyframes
の
0%
100%
ではアニメーションの最初と最後でどのような変形を行うか定義しています。
0deg
360deg
は回転角度で、それぞれ 0、360度を表わしているので、1 周期につき、1 回転することになります。
ご意見・ご要望などは
フォームメール
から送信してください。
更新情報は、
ブログ
でも配信してます。