CSS Transition と Keyframe Animation 違いと優位性


いつもはVelocity.jsをつかってアニメーションを書いているのですが、マウスホバー時のアニメーションをリッチにしたり、ReactでDOMを再レンダリングした時に目を引くためのアニメーションをさせる、そんなときにはCSSベースでアニメーションを書いたほうが、メンテナンスが簡単そう等々、利点があるなと最近感じました。

そこでTransitionとKeyframeを使ったアニメーションに関して、いくつか役にたった記事を集めて、英語のものは勝手に翻訳します。

ざっくりデモ https://codepen.io/nakanishi/pen/gxQzoZ

CSS Transitions VS Keyframe Animations

There are currently two ways to animate things with CSS:

現在、アニメーションをCSSで実装する方法は2つあります。TransitionとKeyframe Animationです。
  • Transitions
  • Keyframe Animations

Each technique has similarities and differences. Here’s how they work.

それぞれの技術は同じ点もありますし、異なる点もあります。これらの技術がどのように機能しているのか、みていきましょう。

Transitions

Transitions work by morphing a property from one value to another when the transition is triggered.

Transitionは、Propertyをある値から別の値へと変化させることで、動作します。これはトランジションがトリガーされた際におきます。

Here is a simple example (hover your mouse over the box to trigger the transition):

次の簡単な例をごらんください。

JS Bin

There are several ways to trigger a transition. The most common way is with the :hover pseudo-class (which you saw in the example above), but others include:

トランジションをトリガーする方法はいくつかあります。一番一般的な方法は、:hover疑似クラスを用いる方法ですが、他にも方法があります。

  • :active
  • :focus
  • :checked
  • :disabled
  • page load
  • media queries
  • device orientation
  • class changes (Triggered via javascript)

(By the way, there’s a great article by Louis Lazaris demonstrating some examples of these techniques) これらのテクニックを使ったサンプルが上記の記事で紹介されています。

In all cases, a user performs some action, which sets our transition in motion. You can adjust many properties of the transition, like the delay or timing, but all transitions must have a beginning and an end.

どのケースにおいても、ユーザーがなんらかのアクションを起こし、それがトランジションにモーションを与えます。トランジションの多くのpropertyを調整することが出来ます。例えば、delayやタイミングを調整することができます。しかし、Transitonの場合には、必ず開始と終了が存在します。

Keyframe Animations

Keyframe animations are similar to transitions, in that they can be used to morph properties from one value to another, but they differ in how they are defined. You define them by identifying the keyframes that make up your animation and giving that set of keyframes a name. Then, you can invoke those keyframes anywhere you want, using CSS selectors. Let’s look at an example:

Keyframe animation は次の点ではTransitionと同じです。つまり、propertyをある値から別の値へと変化させるという点においては同じです。しかし、定義の仕方が異なります。Animationを構成するKeyframeを定義し、そのKeyframe全体に名前を与えます。その後、そのkeyframeを必要な箇所で呼び出します。その際にはCSSセレクタを用います。例を見てみましょう。

JS Bin

As you can see, we’ve defined our “pulse” keyframes, and applied it to several elements.

上記の例では、pulseという名前のkeyframeを定義し、それをいくつかの要素に対して適応しています。

Which is Better?

Both have their strengths and weaknesses. Here are a few of the main benefits I’ve found for each option:

どちらの機能にも強みと弱点があります。それぞれの選択に対する主要な利点を紹介します。

Benefits of Transition:

  • Slightly better browser support (compare transitions to animations)
  • 多少ブラウザーサポートの点で優れている(訳注:ただし2017年現在ではどちらもほとんどサポートされているので、この点はあまり考慮する必要がないかも。)
  • Familiar syntax
  • 親しみやすいシンタックス
  • Simplicity
  • 明快さ
  • Easy to manipulate in Firebug/Devtools
  • FirebugやDevtoolで扱いやすい

Benefits of Keyframes:

  • More granular timing control
  • タイミングをより詳細にコントロールすることができる
  • Easy to mix and match properties (one keyframe definition can animate color and opacity, and size, etc.)
  • 複数のプロパティを組み合わせたり、そのタイミングを合わせるのが簡単。(一つのキーフレームに、色の変更や、透明度の変更や、サイズの変更、というように複数のアニメーションを指定できる。)
  • More animation options (infinite, alternate, etc.)
  • infiniteやalternateなど、より多くのアニメーションに関するオプションがある
  • Keeps code DRY
  • コードをDRYにすることができる。

Personally, I feel like animations with keyframes are more powerful, but it really comes down to your specific application (for example, I chose to use transitions in AnchorJS and keyframe animations for my Flying Toasters).

個人的にはkeyframeを使ったアニメーションのほうが強力かなと思いますが、しかし、それぞれの状況にあわせて選択することになるでしょう。例えばAnchorJSにおいてはtranstionを使いますし、私のフライングトースターのアニメーションにはkeyframeを選択しました。

Finally, one property that is often confused with these animation techniques is transform. While transform is new and can do some neat things (like rotate, scale, translate, etc), it doesn’t animate anything. It’s a typical css property like font color or opacity.

最後に、これらのアニメーションに関する技術と、混同されているpropertyがあります。それはtransformです。transformは、新しく素晴らしい効果をもたらしてくれるものですが(rotateやscaleやtranslateなど)、アニメーションをさせるものではありません。これはCSSのプロパティであって、font-colorやopacityといったものと同じです。

CSS3 Transitions Without Using :hover

Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.

今までのところ、CSS3 Transitionの一番よくある使い方は、これまたよく知られた :hover 擬似クラスと組み合わせて用いる方法でした。

Here’s a typical transition that changes link color on mouseover using pure CSS:

次の例は、transitionを使った典型的なもので、リンクカラーを、マウスホバー時に変更するものです。これは全て純粋なCSSによっておこなわれています。

a, a:link, a:visited {
  color: lightblue;
  -webkit-transition: color .4s linear;
  -moz-transition: color .4s linear;
  -o-transition: color .4s linear;
  -ms-transition: color .4s linear;
  transition: color .4s linear;
}

a:hover {
  color: white;
}

This will animate the color property when you hover over a link on the page. Pretty simple, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.

このコードはcolorプロパティを、aリンクがホバーされた際に変化させます。とてもシンプルなものであり、また多分過去にあなたも見たことがあるか、実際に書いたことがあるのではないかと思います。しかし、トランジションを使えるのは:hoverだけではないのです。

You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined below. I’ve also included a demo for each example.

CSSプロパティをtransitionを用いてアニメーションさせるテクニックは色々あり、その概要を書き出しました。それぞれの項目には、デモも付けました。

Transitions Using :active

The :active pseudo-class matches any element that’s in the process of being activated. The primary way that an element is “activated” is by means of a mouse click, or mouse down.

:active擬似クラスは、全てのactiveな状態にある要素とマッチします。主な、要素をactiveにする方法は、クリックする、もしくはマウスを押し込んだ状態にすることです。

Here’s some CSS and an accompanying demo that demonstrates using :active along with CSS3 transitions to mimic a mousedown event:

次のCSSは、:activeを使ったデモです。CSS3 Transitionを使って、mousedownイベントを検知した時に発動するようになっています。

.box {
  width: 300px;
  height: 300px;
  background: #222;
  -webkit-transition: width 2s ease, height 2s ease;
  -moz-transition: width 2s ease, height 2s ease;
  -o-transition: width 2s ease, height 2s ease;
  -ms-transition: width 2s ease, height 2s ease;
  transition: width 2s ease, height 2s ease;
}

.box:active {
  width: 500px;
  height: 500px;
}

With this code, the box’s width and height properties are animated to become larger as you hold the mouse down on the element. Once you release, the box animates back to its original dimensions.

このコードは、四角の横幅と高さのpropertyがアニメーションされており、要素の上でマウスダウンしている間、それが大きくなります。マウスを離すと、元のサイズに戻ります。

Here’s a demo:

Transitions Using :focus

You can use the :focus pseudo-class to do something similar. This time we’ll use a form, and we’ll animate the width of any form element that receives focus:

:focus 擬似クラスを使って、同様のことができます。今回はform要素を使いましよう。form要素にフォーカスが当たった場合に、幅をアニメーションさせてみました。

input, textarea {
  width: 280px;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  -ms-transition: width 1s ease;
  transition: width 1s ease;
}

input:focus, textarea:focus {
  width: 340px;
}

And here’s a live demo:

Transitions Using :checked

You can animate checkboxes and radio buttons when they become “checked” — although you’re limited with what you can do with those, since you can’t really change their native styling.

checkboxとradio buttonを”check”されたときに、アニメーションさせることもできます。ただしボタンに対してできることは限られています。何故ならnativeのスタイリングを変更することはできないからです。

We’ll just do a simple width change, which will appear to indent any selected checkbox:

シンプルな変更を加えてみることにしました。これによって選択されたチェックボックスは、インデントされたようになります。

input[type="checkbox"]:checked {
  height: 20px;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  -ms-transition: width 1s ease;
  transition: width 1s ease;
}

input[type="checkbox"]:checked {
  width: 30px;
}

And here’s a simple demo:

Transitions Using :disabled

Keeping with the theme of web forms, this time we’ll combine CSS3 transitions with some jQuery to animate the background color of form elements when they become disabled via the disabled attribute:

引き続きformを扱っていきます。今回は、CSS3 TransitionとjQueryを組み合わせて、formの背景色をアニメーションさせます。disabledアトリビュートによってdisableになった際にこれが発動するようにしました。

input[type="text"], textarea {
  background: #e2e2e2;
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -o-transition: background 1s ease;
  -ms-transition: background 1s ease;
  transition: background 1s ease;
}

input:disabled, textarea:disabled {
  background: #666666;
}

And the quick-and-dirty jQuery that adds/removes the disabledattribute is:

そして非常に雑ではありますが、disabledアトリビュートをつけたり外したりするjQueryのコードは以下のようになります。

$(function() {
  $('input[type="radio"]').click(function() {
    if ($(':checked').val() === "other") {
      $('input[type="text"]').removeAttr("disabled");
    } else {
      $('input[type="text"]').attr("disabled", "disabled");
    }
  });
});

So when the last radio button is selected (the one with a value of “other”), the text box has its disabled attribute removed. If another option is selected, the disabled attribute is re-applied.

つまり、ラジオボタンの最後のものを選択すると(このボタンはotherというvalueを持っています)、テキストボックスはdisableといいうアトリビュートが鳥のどかれます。それ以外のラジオボタンが選択されると、disabledアトリビュートが再度適用されます。

The :disabled pseudo-class is dependent on that attribute being present, so the animation will occur whenever that attribute is added or removed.

:disabled 疑似要素は、現在のその属性がどのような状態であるかということに依存しますので、そのためアニメーションはそのアトリビュートが追加されたり削除されるときに、発動します。

Here’s the demo:

Transitions Using Media Queries

This last one may be the least practical, because let’s face it, the only people that ever resize their window to see what happens are web developers.

最後にとりあげるこのテーマはあまり実践的ではないかもしれません。というのも、ウィンドウサイズを変更して、何が起きるかをまじまじと観察するような人間は、ウェブディベロッパーくらいだからです。

Nonetheless, this is just another way to use CSS3 transitions. The new Modernizr design does this.

とにかく、このサンプルでは先程とは違った方法のCSS3 Transitonが使われています。新しいModernizrのデザインでもこれが使われています。

Here’s the code:

.box {
  width: 440px;
  height: 440px;
  background: #222;
  margin: 0 auto;
  -webkit-transition: width 2s ease, height 2s ease;
  -moz-transition: width 2s ease, height 2s ease;
  -o-transition: width 2s ease, height 2s ease;
  -ms-transition: width 2s ease, height 2s ease;
  transition: width 2s ease, height 2s ease;
}

@media only screen and (max-width : 960px) {
  .box {
    width: 300px;
    height: 300px;
  }
}

This example animates two different properties simultaneously, separating the two by a comma. The media query tells the box to shrink if the screen size goes below 961px.

上記の例では2つの異なるプロパティを同時にアニメーションさせています。それぞれの値はコンマで仕切られていますね。メディアクエリーはboxに、スクリーンサイズが961以下になった場合に、縮まるように定義されています。

Resize your window in the demo page to see it work:

Some Notes About the Code

If you’re wondering about the code, I’ve included the standard property last, even though it’s not supported by any browser that I know of.

どんなブラウザでも対応できるように、prefixとそれから標準的なプロパティを最後に追加しています。

Also, I’ve included the -ms- prefix, even though IE9 and IE10 do not yet support transitions. But evidently they are coming in IE10, so it’s worth including an extra line.

同じくprefixに関して。今はIE11が標準的に対応しなくてはいけないブラウザなので、ここは関係ない。

And the code examples that you can see in this post aren’t exactly the same as those used in the demo pages. I’ve made the code as brief as possible for the purpose of focusing only on the parts being discussed in this article.

デモコードは少し変えている。

Are There Other Ways?

This is pretty much all I could come up with for alternate ways to use CSS3 transitions. If you can think of another, let me know.

CSS3: Animations vs. Transitions

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this article, let’s examine the similarities and differences between them so that you can know when to use which.

CSSにおいて、ユーザーの注意を引くための、視覚的な変化をもたらすための技術には、大きく分けて2つあります。一つはAnimationで、もう一つはTransitonです。この記事では、その2つの技術の同じ部分と異なる部分を精査していき、どちらを選択するばよいのか、その指針を示すことにします。

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven’t had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

この記事を最大限活用するためには、あなたが既にある程度AnimationとTransitionの技術に馴染みがあるほうがいいでしょう。実際に手を動かしてこれらの技術を使ったコードを書いたことがないのであれば、まずは上記2つのチュートリアルから始めるといいかもしれません。

Similarities

From a distance, both animations and transitions are very similar. They both allow you to:

大枠でいえば、animationとtransitionはどちらも非常に似ています。どちらも次のことができます。

  • Specify which CSS properties to listen for changes on
  • Set timing (easing) functions to alter the rate of going from a one property value to another
  • timing(イース)ファンクションを設定することで、プロパティの値の変化の進み具合を定義することが出来る。
  • Specify a duration to control how long the animation or transition will take
  • durationを設定することで、animatioやtransitionがどれくらいの時間をかけて変化するかを指定できる。
  • Programmatically listen to animation and transition-specific events that you can then do with as you wish
  • Visualize CSS property changes.

Beyond this point, though, you will see that animations and transitions diverge a bit and let their uniqueness shine through. Let’s look at those unique qualities in greater detail.

上記以外のことがらに関しては、animationとtransitionには少し違いがあり、その違いがお互いの良さを生じさせています。ではそれぞれの特質をより詳細にみていきましょう。

Differences

Animations and transitions show their differences when it comes to how you trigger them to play, whether they loop easily, how complicated of a transition you can define, how formal you must be in being able to use them, and how well they play with JavaScript. Let’s explore those topics in greater detail.

AnimationとTransitionの違いがはっきりと現れるのは、次のような点です。どのように開始のためのトリガーをするか。どれくらいループをさせることが簡単か。どれくらい複雑に変化を指定できるか。使用するためにどれくらい形式的な理解が必要か。そしてJavaScriptと組み合わせた時にどれくらい上手く動くか。ではこれらのトピックについて考えてみましょう。

Triggering

One of the major differences between animations and transitions can be seen in how you trigger them to start playing.

大きな違いの一つは、トリガーの方法です。どのように再生をスタートさせるか、という部分が異なります。

A transition only plays as a reaction to a CSS property that has changed. A common scenario is one where you use the :hover pseudo class to change the value of a CSS property:

Transitionは、CSSプロパティの変更に対してのみ反応し、再生をおこないます。よくあるのは、:hover擬似クラスを用いてCSSプロパティの値を変更する方法です。

To use the example visualized here, if a transition is defined, you would be able to see the circle growing from its normal size to its hover size. Another way of triggering a transition is to use JavaScript to programmatically add or remove CSS classes to simulate a CSS property change. Rounding out our ways of making a property change, you can use JavaScript to set an inline style that changes a property your transition is listening for.

上記の例を使って説明をします。transitionを定義しているので、通常のサイズからホバーしたサイズへと、円が大きくなっていくことが確認できます。ホバー以外の方法としては、JSを使ったプログラミングによってCSSクラスを追加したりすることでCSSプロパティを変更する方法もあります。つまりJSを使ってインラインスタイルに、プロパティを変更するような変更を加えます。しかもtransitionが待ち構えているプロパティを変更します。(訳注:「transiton: width 2s」となっている要素に対して、widthを例えばjQueryを使って$(‘.target’).width(400)と指定すればアニメーションする。)

Animations, on the other hand, don’t require any explicit triggering. Once you define the animation, it will start playing automatically. Yep, that’s how animations roll!

Transitionに対して、Animationの場合は、トリガーを明示的に宣言する必要はありません。一度アニメーションを定義してしまえば、自動的に再生されます。

Looping

This is pretty simple. Animations can be easily made to loop by setting the animation-iteration-count property. You can specify a fixed number of times you want your animation to repeat:

この話題に関して結論は非常にシンプルです。Animationはanimation-iteration-countプロパティを使うことで、簡単にループを設定することができます。アニメーションを繰り返す回数を具体的な数字で指定することができます。

animation-iteration-count: 5;

If you just want your animation to loop forever, you can do that as well:

無限にループさせた場合は、次のようにすることで実現できます。

animation-iteration-count: infinite;

Transitions, on the other hand, don’t have a property that specifies how many times they can run. When triggered, a transition runs only once. You can make a transition loop by fiddling with the transitionEnd event, but that isn’t particularly straightforward – especially when compared with animations.

それに対してTransitionの場合には、繰り返し何回も再生するように指定するpropertyはありません。トリガーされると、トランジションは一度だけ実行されます。transitionをループさせることは、transitonEndイベントを扱うことで実現できますが、しかしそれはあまり正攻法ではありません。とくにAnimationと比べた場合にはかなり複雑な方法です。

Defining Intermediate Points / Keyframes

中間点の定義 / Keyframeの場合

With an animation, you have the ability to define keyframes which give you more control over your CSS property values beyond just the start and the end:

Animationの場合、keyframeの定義によって、CSSプロパティの値をよりコントロールすることができ、開始と終了以上の定義ができます。

You can set as many keyframes as you want, and when your animation plays, each keyframe will be hit with the specified property changes reflected. This allows you to create the kinds of involved animations that help HTML5 compete with more established animation technologies like Flash more effectively.

keyframeは望む数だけ、何個も設定できます。アニメーションがスタートすると、それぞれのkeyframeの位置で指定されたpropertyの変更が反映されます。これによってHTML5で、他の洗練されたFLashのようなアニメーション用のテクノロジーに、匹敵する効果を作り出すことができます。

With a transition, you don’t have much control over anything beyond the end result:

Transitionでは、最初と最後の指定以上の、複雑なコントロールはできません。

A transition simply goes from an initial state to the final state. You cannot specify any points in-between like you can with an animation, so a transition might not be a good choice if you are trying to create the next Teen Girl Squad sensation or a complex animation.

Transitionは単純に、初期状態から、最終的な状態へと、推移させることしかできません。keyframe animationのように、中間点を指定することはできないのです。なのでtransitonでは、Teen Girl Squadのような刺激的で複雑なアニメーションを作るのには向いていません。

Specifying Properties Up-Front

The next thing I will describe is how formal animations and transitions are when it comes to defining a transition between CSS property values.

次の話題は、どれくらい規則だった定義が、アニメーションにおいて必要か、という観点です。

On the formal side, you have transitions. Every CSS property you want recognized by your transition must be explicitly represented.

もし規則だった書き方をしたいのであれば、Transitionに軍配が上がるでしょう。Transitionに反応して欲しい全てのCSSプロパティを、明示的に書く必要があります。

For example, let’s say you have something like the following:

例えば、以下のようなコードを書いたとしましょう。

#mainContent { 
        background-color: #CC0000; 
        transition:background-color .5s ease-in; 
} 
#mainContent:hover { 
        cursor: pointer; 
        background-color: #000000; 
        width:500px;
}

Upon hover, I specify a different value for both background-color as well as width. My transition specifies only background-color though. This means your browser is only listening for changes on the background-color property.

hoverした場合には、通常時とは異なる2つのプロパティの値を指定しています。バックグランドカラーと幅です。ただし、Transitionではバックグランドカラーだけを指定しています。つまり、バックグラウンドカラーの変更だけを、監視することになります。

If I wanted my transition to affect both the background-color and width properties, I will need to explicitly add another transition entry for width:

もしバックグラウンドカラーとwidthの2つのプロパティをトランジションしたい場合には、明示的にwidthもtransitionに加える必要があります。

#mainContent { 
        background-color: #CC0000;
        transition:background-color .5s ease-in, width .5s ease-in 
} 
#mainContent:hover { 
        cursor: pointer; 
        background-color: #000000; 
        width: 500px;
}

What About transition: all?

全てのプロパティをトランジションする場合にはどうすればよいか

You do not have to specify every property that you care about when using a transition. You could simplify your life by using the all value instead: transition: all .5s ease-in. I do not recommend this because you will take a performance hit. Your browser is now listening for a whole lotta properties as opposed to just a few that you know you will be modifiying. Unless you have a strong need to do this, I would recommend specifying each CSS property you wish to transition individually.

Transitionを使う際に、全てのプロパティを明示的に指定する必要はありません。allという値を代わりに使えば、シンプルに全てのプロパティををトランジションさせることができます。「transition: all easein」といった具合です。とはいえ、これはあまりおすすめしません。何故ならパフォーマンスが下がるからです。こうした場合、ブラウザは沢山存在する全てのプロパティを監視するからです。それなのにあなたが変更するプロパティは少ししかありません。こうすべき強い必要性がない限りは、transitionさせたいプロパティをそれぞれ指定することをおすすめします。

With animations, you have the ability to specify properties at a whim in each keyframe without having to do anything that resembles declaring them:

Animationにおいては、以下のようにすればいいです。

keyframes imageSlide { 
        0% { 
                left: -150px;
        } 

        20% { 
                left: 50px; 
                height: 200px;
        } 

        80% { 
                left: 200px; 
                height:300px;
        } 

        100% { 
                left: 600px; 
                background-color:#FFFFFF;
        } 
}

In this example, the height and background-color of whatever element I am animating will smoothly transition when the appropriate keyframe is reached – even if the property was never listed before!

このように、適切なアニメーションが各keyframeで発動します。そために、前もって変更するプロパティのリストを作っておく必要はありません!

Interaction with JavaScript

In many cases, a transition or animation you declare in CSS will be good enough. You specify in CSS your starting value, the ending value, and any intermediate values that you want your properties to take. Your animation or transition will read these values and take care of business from there. This scenario works best when what you are wanting to do is predefined. There will be times when you want to alter the value of a property that you are animating based on some external input – a mouse click, the result of some calculation, etc.

多くの場合において、CSSで実装するtransitionやanimationといった機能は、それだけで十分な役割を果たしてくれます。CSSで開始時の値を定義して、終わりの値も定義して、そして中間点を定義して、といった具合に。AnimationやTransitionはそれらの値をしっかり読み取って、それぞれの地点で自分の仕事を遂行します。どうしたいかが事前に決まっている場合には、これで役割をしっかりとこなすことができます。しかし、値を、外部の入力値に基づいて、アニメーションを変更したい場合もあるでしょう。例えばマウスクリックや、ある種の計算の結果を使用する場合です。

For such interactions, property values entirely predefined in CSS is a bit limiting. You can decide in such cases to rely on JavaScript, but going all-in on JavaScript alone may be too extreme as well. What you want is a hybrid approach where your animation or transition is declared primarily in CSS but certain aspects of which are manipulated using JavaScript.

このようにインタラクションが必要な場合には、CSSに予め記述された値だけでは、できることが限定されてしまいます。そういった場合には、JSを使用することを検討すると思いますが、かといって全てJSだけで実装するのはやりすぎだというようなケースがあります。そういう場合には、CSSアニメーションとJSのハイブリッドというアプローチも選択肢に入るはずです。animationやtransitionで予め大部分をCSSにかいておいて、しかしある部分はJSで操作する、といった方法です。

When it comes to combining JavaScript with either an animation or transition, there is no contest – you almost always want to use a transition. Using an animation with JavaScript is possible…in much the same way it is possible to win at the cinnamon challenge. It isn’t impossible to make it work, but chances are, you don’t want to do it. The reason for this difference has to do with how transitions and animations work.

JSと組み合わせるという観点から言うと、はっきりいって勝負は見えています。ほとんどのケースでは、transitionを使うことになるでしょう。Animationを使う方法も無理ではないのですが、そうしようと思う機会はかなり少ないはずです。その理由は、transitionとanimationの挙動に違いがあるからなのです。

Animations are very specific in what they do. The @keyframes rule clearly lays out the path your animation will take as it is running. Attempting to change your animation in JavaScript requires a very complicated series of steps that involves actually modifying the @keyframes style rule itself. If you’ve ever had to manipulate CSS that lives inside a style rule, you know that it is pretty unintuitive.

Animationの場合は、何をするのかということをかなり具体的に定義します。@keyframeによってアニメーションがどのような状態を変遷していくのかを、明確に定義します。JSによってアニメーションを変更しようとすると、かなり複雑な作業が必要になります。@keyframesを書き換えないといけないからです。インラインで記述されたCSSをマニュピレイトしたことがある人ならわかると思いますが、これはかなり直感的ではありません。

Contrasting the predefined path of an animation is the transition. Transitions are not as well defined as they may seem. Your transition will kick in when a property it is listening for changes. This property change can be set entirely via only CSS:

Transitionの場合は、そこまで定義をしていません。トランジションは、待ち受けていたプロパティの変更があった場合に、開始されます。下記のコードではプロパティの変更はCSSの中でなされていますね。

#myElement {
        background-color: #FFF;
        transition: background-color .2s ease-in;
}
#myElement:hover {
        background-color: #000;
}

This change can also be accomplished via JavaScript where you modify a CSS property the transition is listening for by setting an inline style:

CSSプロパティの変更はJSからも可能です。インラインに書かれたトランジションが待ち受けるプロパティを、JSから変更しましょう。

var myElement = document.querySelector("#myElement");
myElement.style.backgroundColor = "333";

The transition doesn’t care how the properties it is listening for changes. As long as the property changes somehow, the transition will get to work. This means, for interactive scenarios that don’t involve a predefined starting and ending point, you can do a lot of interesting things by deferring all transition-related heavy lifting by using the transition declaration. The actual values of the properties you are wanting to transition can be specified using JavaScript.

transitionは、変更を監視しているプロパティがどんな方法で変更されるかは、まったく気にしていません。とにかくプロパティが変更されれば、Transitionが発動します。つまり、予め始まりと終わりが決まっていないインタラクティブなアニメーションを実装する場合に、transtionの対象になっているプロパティを変更することで、様々な面白い効果を得られる、ということです。望むプロパティの値をJSを使って指定することができます。

To help visualize what I just wrote, let’s look at a simple example:

Click anywhere in the gray box to have the circle move to the point of the click. Keep clicking around to see the circle keep moving.

灰色のboxの中でクリックすると、円がその場所に移動します。クリックして、円が移動するのを確認してください。

How this works is pretty simple. The actual movement is handled by the transition. Knowing where to transition to is handled by the JavaScript which sets the top and left property values on the element. Because the transition is listening for changes to the top and left properties, any change results in your transition kicking in. The end result is exactly what you wanted. Best of all, you didn’t have to write any JavaScript for handling the actual movement itself. As a bonus, because the transition is declared in CSS, your browser optimizes it heavily so that it runs really smoothly.

仕組みは非常に簡単です。実際の動きは、transitionによって実装されています。どこへ移動すべきなのか、ということはJSを使って制御されています。JSによってtranstionが監視している、leftプロパティとtopプロパティを変更しています。変更が発生すると、transitionが起動します。その結果希望する結果を実現しています。一番いいのはJSを全く書かないで実装する方法ではありますが。副次的な利点としてtranstionはCSSで宣言されているので、ブラウザーはパフォーマンスを最大化してくれ、結果として非常にスムーズに動きます。

This friendship between transitions and JavaScript is so full of win, it hurts just writing about.

transitionとjsの組み合わせは、非常に有効です。

Conclusion

There you have it – a candid look at what makes transitions and animations similar yet so very different. My general approach for determining when to use which goes like this:

TransitionとAnimationが基本的には似ていて、それでいて異なる部分もかなりある、ということをみてきました。どちらを使うべきなのか、ということに関しての私の選択基準は、以下の様なものです。

  • If what I want requires the flexibility provided by having multiple keyframes and easy looping, then I go with an animation.
  • keyframeと簡単に実装できるループによる柔軟性が欲しいときは、animationを選択します。
  • If I am looking for a simple from/to animation, I go with a transition.
  • シンプルに、開始と終了を設定するアニメーションを実装した場合にはtransitionを選択します。
  • If I want to manipulate the property values that I wish to animate using JavaScript, I go with a transition.
  • JSでプロパティの値を操作したい場合には、Transitionを選択します。

Now, with enough effort and JavaScript tomfoolery, you can neutralize any deficiences I list in deciding whether to use a transition or an animation. My recommendations are based on the common cases where you take a transition or animation mostly at face value. Herculean efforts to change their default behavior is admirable but often unnecessary.

もちろんJSで色々とがんばれば、どちらの機能を選択するか、を検討する際にあげたそれぞれの欠点を埋め合わせることはできます。しかし、一般的なケースにおいては上記のような選択をするのが普通でしょう。必死の努力によってこれら二つの機能の基本的な振る舞いを変更することはできますし、それは賞賛に値するのかもしれませんが、意味はありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です