webページ作成で CSSアニメーションを具体的に使えないか試す

投稿日:2014年4月18日

CSS の animation や transition を使えるようになって久しいですが、実際の使いどころはいまいちな印象です。原因の大部分は IE にあるとおもいますけど。

そこで animation に対応しているまともなブラウザさんにはおもてなしを、
そして対応していない困ったブラウザにはアニメーションはしなくとも表示はできるようにする。
といったところを目処に animation を試してみました。

デモ

※見づらい場合はページを表示いただけます
CSS アニメーション サンプルページ

javascript ではクラスの付け替えのみを行い、そのクラスには display: blockanimation を指定しました。

結果、Firefox さんや Chrome さんでは期待どおりに表示されました。IE では IE9 以前では当然のようにアニメーションはしませんが、それだけでなく IE10 と IE11 でも一部うまくいきませんでした。具体的には switch4 で、これはおそらく transform-function を複数指定しているためのようです。

ただ IE でもコンテンツの表示はできているので、方針次第では使用してみるのもありでしょうか。

HTML


<div id="switch">
  <a href="#content1">switch1</a>
  <a href="#content2">switch2</a>
  <a href="#content3">switch3</a>
  <a href="#content4">switch4</a>
  <a href="#content5">switch5</a>
  <a href="#content6">switch6</a>
  <a href="#content7">switch7</a>
  <a href="#content8">switch8</a>
</div>

<div id="container">
  <div id="content1" class="content"></div>
  <div id="content2" class="content"></div>
  <div id="content3" class="content"></div>
  <div id="content4" class="content"></div>
  <div id="content5" class="content"></div>
  <div id="content6" class="content"></div>
  <div id="content7" class="content"></div>
  <div id="content8" class="content"></div>
</div>

CSS


#switch {
  padding: 20px 0 0;
  text-align: center;
}

#switch a {
  margin: 0 4px;
}

#container {
  background: #fff;
  border: solid 1px #999;
  margin: 12px;
  height: 75%;
}

.content {
  display: none;
  height: 100%;
  width: 100%;
}

.content.show {
  display: block;
}

#content1 { background: #228b22; }
#content2 { background: #b0c4de; }
#content3 { background: #3cb371; }
#content4 { background: #4682b4; }
#content5 { background: #2e8b57; }
#content6 { background: #f0e68c; }
#content7 { background: #fa8072; }
#content8 { background: #9370db; }

#content1.show {
  animation: overlay-in .5s ease-out;
  -webkit-animation: overlay-in .5s ease-out;
}

#content2.show {
  animation: fill-in .3s ease-out;
  -webkit-animation: fill-in .3s ease-out;
}

#content3.show {
  animation: fall-in .4s ease-out;
  -webkit-animation: fall-in .4s ease-out;
}

#content4.show {
  animation: bounce-up-in .4s ease-out;
  -webkit-animation: bounce-up-in .4s ease-out;
}

#content5.show {
  animation: pulse-in .5s linear;
  -webkit-animation: pulse-in .5s linear;
}

#content6.show {
  animation: flipX-in .5s;
  -webkit-animation: flipX-in .5s;
}

#content7.show {
  animation: flipY-in .6s;
  -webkit-animation: flipY-in .6s;
}

#content8.show {
  animation: rotate-in .3s ease-out;
  -webkit-animation: rotate-in .3s ease-out;
}

/* keyframes
--------------------------------------*/

@keyframes overlay-in {
  0% { opacity: 0; transform: scale(1.5); }
  80% { transform: scale(1); }
  100% { opacity: 1; }
}

@-webkit-keyframes overlay-in {
  0% { opacity: 0; -webkit-transform: scale(1.5); }
  80% { -webkit-transform: scale(1); }
  100% { opacity: 1; }
}

@keyframes fill-in {
  0% { opacity: 0; transform: scale(.8); }
  80% { transform: scale(1); }
  100% { opacity: 1; }
}

@-webkit-keyframes fill-in {
  0% { opacity: 0; -webkit-transform: scale(.8); }
  80% { -webkit-transform: scale(1); }
  100% { opacity: 1; }
}

@keyframes fall-in {
  0% { opacity: 0; transform: translate(0, -10%); }
  80% { transform: translate(0); }
  100% { opacity: 1; }
}

@-webkit-keyframes fall-in {
  0% { opacity: 0; -webkit-transform: translate(0, -10%); }
  80% { -webkit-transform: translate(0); }
  100% { opacity: 1; }
}

@keyframes bounce-up-in {
  0% { opacity: .5; transform: scale(.9, 1) translate(0, 50%); }
  60% { transform: scale(1) translate(0, -2%); }
  80% { opacity: 1; transform: translate(0, -2%); }
  100% { transform: translate(0); }
}

@-webkit-keyframes bounce-up-in {
  0% { opacity: .5; -webkit-transform: scale(.9, 1) translate(0, 50%); }
  60% { -webkit-transform: scale(1) translate(0, -2%); }
  80% { opacity: 1; -webkit-transform: translate(0, -2%); }
  100% { -webkit-transform: translate(0); }
}

@keyframes pulse-in {
  0% { transform: scale(.98); }
  25% { transform: scale(1.02); }
  75% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@-webkit-keyframes pulse-in {
  0% { -webkit-transform: scale(.98); }
  25% { -webkit-transform: scale(1.02); }
  75% { -webkit-transform: scale(1.02); }
  100% { -webkit-transform: scale(1); }
}

@keyframes flipX-in {
  0% { transform: perspective(1000px) rotateX(90deg); }
  100% { transform: rotateX(0); }
}

@-webkit-keyframes flipX-in {
  0% { -webkit-transform: perspective(1000px) rotateX(90deg); }
  100% { -webkit-transform: rotateX(0); }
}

@keyframes flipY-in {
  0% { transform: perspective(1000px) rotateY(180deg); }
  100% { transform: rotateY(0); }
}

@-webkit-keyframes flipY-in {
  0% { -webkit-transform: perspective(1000px) rotateY(-90deg); }
  100% { -webkit-transform: rotateY(0); }
}

@keyframes rotate-in {
  0% { opacity: 0; transform: rotate(3deg); transform-origin: left top;}
  80% { transform: rotate(0); }
  100% { opacity: 1; }
}

@-webkit-keyframes rotate-in {
  0% { opacity: 0; -webkit-transform: rotate(3deg); -webkit-transform-origin: left top;}
  80% { transform: rotate(0); }
  100% { opacity: 1; }
}

JavaScript


$('#switch a').click(function () {
    var target = $(this).attr('href');
    $(target).addClass('show').siblings('.show').removeClass('show');
    return false;
});

(藤崎)

関連記事

  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル