anchor.diff:  include ../_util-fns
   
   :marked
  +  모션은 모던 웹 어플리케이션의 디자인에서 중요한 부분입니다.
  +  훌륭한 사용자 인터페이스는 필요한 곳에서 주의를 환기시키는 흥미진진한 애니메이션으로
  +  상태 사이를 원활하게 전환합니다. 잘 디자인 된 애니메이션은
  +  UI를 재미있게 할뿐 아니라 사용하기 편하게 합니다.
  +
     Motion is an important aspect in the design of modern web applications. Good
     user interfaces transition smoothly between states with engaging animations
     that call attention where it's needed. Well-designed animations can make a UI not only
     more fun but also easier to use.
   
  +  Angular의 애니메이션 시스템을 사용하면 순수한 CSS 애니메이션과 동일한 기본 성능으로
  +  실행되는 애니메이션을 제작할 수 있습니다. 애니메이션 로직을 나머지 어플리케이션 코드와
  +  긴밀하게 통합하여 손쉽게 제어 할 수 있습니다.
  +
     Angular's animation system lets you build animations that run with the same kind of native
     performance found in pure CSS animations. You can also tightly integrate your
     animation logic with the rest of your application code, for ease of control.
   
   .alert.is-helpful
     :marked
  +    Angular 애니메이션은 표준 [웹 애니메이션 API](https://w3c.github.io/web-animations/)에 따라 구축되었으며
  +    이를 [지원하는 브라우저](http://caniuse.com/#feat=web-animation)에서 실행됩니다.
  +
       Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/)
       and run natively on [browsers that support it](http://caniuse.com/#feat=web-animation).
  +
  +    다른 브라우저에서는 polyfill이 필요합니다.
  +    GitHub의 [`web-animations.min.js`](https://github.com/web-animations/web-animations-js)를 페이지에 추가하세요.
   
       For other browsers, a polyfill is required. Grab
       [`web-animations.min.js` from GitHub](https://github.com/web-animations/web-animations-js) and
  
positive.code: +makeExample('animations/ts/src/app/hero-list-groups.component.ts', 'animationdef')(format=".")
  
  :marked
    One group animates the element transform and width; the other group animates the opacity.
  
  :marked
    ## Animation callbacks
  
    A callback is fired when an animation is started and also when it is done.
  
    In the keyframes example, you have a `trigger` called `@flyInOut`. There you can hook
    those callbacks like this:
  
negative.code: +makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template')(format=".")
  
  :marked
    콜백은 `fromState`, `toState` 및 `totalTime`과 같은 유용한 속성을
    가진 `AnimationTransitionEvent`를 수신합니다.
  
    The callbacks receive an `AnimationTransitionEvent` which contains useful properties such as `fromState`,
    `toState` and `totalTime`.
  
    이러한 콜백은 애니메이션이 선택되었는지 여부에 관계없이 호출됩니다.
  
    Those callbacks will fire whether or not an animation is picked up.
  