Firefox 33.1でロゴがアニメーションするようになっていた

2014/11/14
ライター：鹿

職場PCのFirefoxを33.1にアップデートしたら初回起動ページ（about:home）にあるFirefoxのロゴがアニメーションで表示されるようになってました。

どうやってアニメーションしているのかソースを見て調べてみると、意外な方法でアニメーションしていたので共有します。

目次で流し読みする･*･:≡(　ε:)

1.デモ
2.動作の説明
1. 2-1.アニメーション前
2. 2-2.アニメーション中
3.まとめ

デモ

こちらにサンプルを用意しました。動きを再現したかっただけなので実際のソースとは異なります。

動作の説明

まずはアニメーション前とアニメーション中のHTMLソースをご確認ください。

アニメーション前


<div id="brandLogo" class="anniversary">
	<div id="animation-container-4736" style="opacity: 0;">
		<div class="animation-clip flare" style="opacity: 0;">
			<div class="frames">
				<div class="flare1"></div>
				<div class="flare2"></div>
				<div class="flare3"></div>
			</div>
		</div>
	</div>
</div>

アニメーション中


<div id="brandLogo" class="anniversary hidden-background">
	<div id="animation-container-4736" style="opacity: 1;">
		<div class="animation-clip flare" style="opacity: 1;">
			<div class="frames animate">
				<div class="flare1"></div>
				<div class="flare2"></div>
				<div class="flare3"></div>
			</div>
		</div>
	</div>
</div>

1～4行目のclassやstyleが若干異なっております。
続いてはCSSを見て行きましょう。


#brandLogo.anniversary {
    height: 143px;
    width: 137px;
    background-size: 137px 143px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAACPCAMAAAD5owjmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF/8wKSavc5+fnEZLQCDVsS5XK2tra/I0D/rYF/9pV5Vsm93oaysrKzkUrI6jcuLi41EsrR4q43VMoM4S6/NKv7GMk93wU+bWMdbTk/+jOE2ep62gA83Eg2VASBz95qKio9I9SOKnadHRz+a9v9HoAh7zqmW5Q/+23m5ubbKnb/cqL/NvMCUeEI3i2+4oI+4YM94QZoVw223NXG3a4CildBViamcbyiIiI8/Pzs9T1+I8y73AA+5wQ/Pz8mJNf/axLEleV/5wAGKLb/6QA+6wM8ZppzWow94IA/akvOYvCIpvUJ4rG94oY72kjN5TKJXOq/+aN+6IQElKNxjsvJ5TO/6wA5WoT1Of76XQSy0Et9Hk0IFR732MZ87un95IU//XfEEyI/u7m5F0DJGSZ6fP9cVFJMHy0SUZSDWGj3Yd0qYUzxpIqV3mH+5YUSmdxGGGcdGxY52Ek//vzIWuk//fzXp/T944VMXas0oYW6KCRrsje6XIi+4IP9fv/0aqR6YgVwdv0HlqNe0g71NKuyIVXHHGw1VpBs5eF1VIiyqU2MDVPNZ7S0Lmt6KoX+6YMXLHi5Xc+/rob11Eo42c4bId8SzpG31koAU+Ojai+MUVamEMyYT1A9IEI2aQZ9oMRu6OR1JaB21wdfJy2S1ZiGG2v+4wb6Jga+YYA7ZII5WohGz5Z7YoI11kg8XIQ4WwowF0rN2B3nop+9ooCOq/f9pQJ4e/7396/7LAS5MrBYGRg820g9ZwJ9o0IvKyl7G0ns8i9DB9P1cqR76cN+5wJzU46+5IX8L0IP6PJ8aMO720ZLmyhpK299psQkJ57uriozdjBhqiM3FUfITth+5QI9qoNJCZKn7299JQE8psDgH9++YwQ/5YA118s+KUB9ZQg93Ec93Ud/5IA93UY82kg/5IE+30Q83EcCl2fFYDCIa3f8XEY8nYY8Pf/83UgDnWy/5YFx9Pf+5IAY1RY+5IEw8bUiI2d+5YB9KAj1LxIurZkrragHR5G/Zwjj5CPloqS////pI5FSwAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAABunSURBVHja7Jt7UFN5lsdDeMUKj6VCgY0kiApBBYEWNC4GkUC6eVQEBJSHDs02mIHGUMuitlgTsWVKJzMIs22Jj2GG1pleWRvtpnxle9Pd1TvSu0NXz9LO1CKtpVO2YFlo9+jizPbQs+ec3+/e3LyQeW3tH3NuEhIe+X3yPd9zfucmKvv9/5eQ/ZXkryR/URI9hE4HV/Gg+L8loeV1F7fs37+OYg0ce9et279ly8s63R+LI/sjpEAIWN5rrNu7f4uOcP6yJISxXwqRsCYhgd8kiN/cu27Ly3+wNH8ICeTkooiR4IyFcPBLgsizjqT5i5CAGi+vk0DA+s44ItxhOGuI5wvM0p+dBDjk+zmHwHBk4RG3EJAEbfZfnD+LbL4cFwUMWu2IiOF3xI9dJDzLlzMaTNK8dZHNr2gv7iVzSqXwIwI/v2F+5QE/aW9fDizLOcz+edpFNi9BviA5+uDFIkY7YfjFw0E38fHx7Ctn8WsPbEcagoEXsH9essjmwRHEs7K8vR1fMS03AuuOEMUwHPCVvog8I+3tgX4kDeoCdfRsFtkzQS6uI47lwAEkhBE/AovGj6AYPMLiJUEwtpFAUGZ5+3IsJ7DLM1Fkz3KIHIuWcfgByIifDUlshBKPS8IN6DEs0AhMfoEFgBK48L2FZN81F5/lFpn3rU3MzLo1XA9MvV8gKW+y2QRP+A0Pk1+H/Y4MH4EHQBcWFk+cBRiBgcu1nyRQjp7lFm8kupf0HEnOQZYHBuJLDBwpsAXaRmx+zKbx3LPDyDN8ZBh54IogNoYSQSjaSyAqZOjlOWWReQHZsELP7mxZk9DXB4IAQwQ8a0GBSmUKLBiB3NicDhm+j7kZHiaU4SNwewRzZLOZVKiKyfTGJa02BHKUsHfODMk8QVYEv4h/ASCC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");
}

#brandLogo.anniversary.hidden-background {
    background: none;
}

#animation-container-4736 {
    position: relative;
    top: -112px;
    left: -260px;
    width: 656px;
    height: 256px;
    overflow: visible;
    pointer-events: none;
    opacity: 1;
    display: inline-block;
    transition-property: opacity;
}

#animation-container-4736 .animation-clip {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 656px;
    height: 600px;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
}

#animation-container-4736 .animation-clip.flare {
    width: 656px;
    left: 3px;
    top: -113px;
    height: 600px;
}

#animation-container-4736 .frames {
    position: absolute;
    top: 0px;
    left: 0px;
    backface-visibility: hidden;
}

#animation-container-4736 .flare .frames {
    width: 19680px;
    height: 600px;
}

#animation-container-4736 .flare .frames.animate {
    transform: translate3d(-19680px,0,0);
    animation-name: flare;
    animation-duration: 2.6s;
    animation-timing-function: steps(30, end);
    animation-fill-mode: none;
}

#animation-container-4736 .flare .frames > div {
    display: block;
    float: left;
    width: 6560px;
    height: 600px;
    background-size: 6560px 600px;
    background-repeat: no-repeat;
}

#animation-container-4736 .flare1 {
    background-image: url(https://snippets.cdn.mozilla.net/media/files/7d21c69b-2133-407f-a83e-5b7f397d6d1f.png);
}

#animation-container-4736 .flare2 {
    background-image: url(https://snippets.cdn.mozilla.net/media/files/63daebba-4306-44ca-bfcf-dda228c00d31.png);
}

#animation-container-4736 .flare3 {
    background-image: url(https://snippets.cdn.mozilla.net/media/files/9bd80174-fa00-4690-8a7a-a2d8f5dc10c2.png);
}

@keyframes flare {
    0% {
        transform: translate3d(0,0,0);
    }
    100% {
        transform: translate3d(-19680px,0,0);
    }
}

めちゃくちゃ長いURLが入っています。

このソースを見て理解出来た人も居るかとは思いますが、実はCSSアニメーションで横に長い画像をパラパラマンガのように動かしてアニメーションしておりました。

アニメーション前は「#brandLogo.anniversary」で動かないロゴ画像を表示しておき、アニメーションが始まるとそこに「.hidden-background」というclassが付きます。これで背景を非表示にしております。

それと交代で、opacity:0;で透明にしていた「#animation-container-4736」と「.animation-clip .flare」の値を1にしておき、新たに付与された「frames animate」でCSSアニメーションを実行しております。

.flare1～3にはそれぞれ10コマずつの背景画像を敷いており、floatで横並びにしています。それを「translate3d」を使ってdiv全体を右から左に動かしています。

アニメーションが終わると、付けたclassを外して透明度を元に戻しています。

まとめ

見れば見るほどかっこいい演出ですが、背景画像さえ用意できれば他のページにも応用が効きそうです。gifアニメだと画質が劣化してしまいますが、これなら画質も綺麗で滑らかにアニメーションが表示されます。

今後使う機会が有れば試してみたいと思います。

Firefox OSアプリ開発ガイド

posted with カエレバ

本間雅史,宮家秀二,秋葉秀樹,今村博宜,山本祐輔,秋葉ちひろ,小森田賢史リックテレコム 2013-06-10

Amazon

楽天市場

＼この記事についてシェアしてみよう／

トップページから他の記事を探す

Firefox 33.1でロゴがアニメーションするようになっていた

デモ

動作の説明

アニメーション前

アニメーション中

まとめ

＼この記事についてシェアしてみよう／

コメントを残すコメントをキャンセル

Related Post - 関連記事

CSS3とjQueryを使ったスマホサイト作成テクニック

【2014年度版】このブログで使っているWordPressプラグインまとめ

HTMLやCSSが分からなくても本格的なウェブサイトが作れる「Ameba Ownd」を試してみる

アイコン読み込みがJavaScript+SVG描画に変わった「Font Awesome 5」に変更してみた

Google Chromeで64bit版を使う方法

レスポンシブWEBデザインについて

バイラルメディアはなぜ嫌われるのか

スマホサイトをコーディングする前に確認しておく7つのこと

人工知能を使って小さな画像を綺麗に拡大するWebサービス「waifu2x」

【jQuery】Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す

Firefox 33.1でロゴがアニメーションするようになっていた

デモ

動作の説明

アニメーション前

アニメーション中

まとめ

＼ この記事についてシェアしてみよう ／

コメントを残すコメントをキャンセル

Related Post - 関連記事

CSS3とjQueryを使ったスマホサイト作成テクニック

【2014年度版】このブログで使っているWordPressプラグインまとめ

HTMLやCSSが分からなくても本格的なウェブサイトが作れる「Ameba Ownd」を試してみる

アイコン読み込みがJavaScript+SVG描画に変わった「Font Awesome 5」に変更してみた

Google Chromeで64bit版を使う方法

レスポンシブWEBデザインについて

バイラルメディアはなぜ嫌われるのか

スマホサイトをコーディングする前に確認しておく7つのこと

人工知能を使って小さな画像を綺麗に拡大するWebサービス「waifu2x」

【jQuery】Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す

＼この記事についてシェアしてみよう／