anchor.diff:  
   
   :marked
  +  ### `void '상태
     ### The `void` state
  +
  +  `void`라고 불리는 특별한 상태는 모든 애니메이션에 적용될 수 있습니다.
  +  이것은 엘리먼트가 뷰에 연결되지 않았을 때 적용됩니다. 아마도 엘리먼트가 아직 추가되지 않았거나 제거 되었기 때문일 것입니다.
  +  `void` 상태는 애니메이션 입력 및 이탈을 정의하는 데 유용합니다.
   
     The special state called `void` can apply to any animation. It applies
     when the element is *not* attached to a view, perhaps because it has not yet been
     added or because it has been removed. The `void` state is useful for defining enter and
     leave animations.
   
  +  예를 들어 `* => void` 전환은 엘리먼트가 뷰에서 이탈할 때
  +  이전의 상태와 관계없이 적용됩니다.
  +
     For example the `* => void` transition applies when the element leaves the view,
     regardless of what state it was in before it left.
   
  
positive.code:   * `'3em'`
    * `'100%'`
  
    If you don't provide a unit when specifying dimension, Angular assumes the default of `px`:
  
    * `50` is the same as saying `'50px'`
  
    ## Automatic property calculation
  figure
    img(src="/resources/images/devguide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px" )
  :marked
    Sometimes you don't know the value of a dimensional style property until runtime.
    For example, elements often have widths and heights that
    depend on their content and the screen size. These properties are often tricky
    to animate with CSS.
  
    In these cases, you can use a special `*` property value so that the value of the
    property is computed at runtime and then plugged into the animation.
  
    In this example, the leave animation takes whatever height the element has before it
    leaves and animates from that height to zero:
  
  +makeExample('animations/ts/src/app/hero-list-auto.component.ts', 'animationdef')(format=".")
  
  :marked
    ## Animation timing
  
    There are three timing properties you can tune for every animated transition:
    the duration, the delay, and the easing function. They are all combined into
    a single transition *timing string*.
  
    ### Duration
  
    The duration controls how long the animation takes to run from start to finish.
    You can define a duration in three ways:
  
    * As a plain number, in milliseconds: `100`
    * In a string, as milliseconds: `'100ms'`
    * In a string, as seconds: `'0.1s'`
  
    ### Delay
  
    The delay controls the length of time between the animation trigger and the beginning
    of the transition. You can define one by adding it to the same string
    following the duration. It also has the same format options as the duration:
  
    * Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
  
    ### Easing
  
    The [easing function](http://easings.net/) controls how the animation accelerates
    and decelerates during its runtime. For example, an `ease-in` function causes
  
negative.code:   img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400")
  
  :marked
    여러 개의 트랜지션이 동일한 타이밍 설정을 가지고 있다면,
    같은 `transition` 정의로 결합 할 수 있습니다:
  
    If several transitions have the same timing configuration, you can combine
    them into the same `transition` definition:
  
  +makeExample('animations/ts/src/app/hero-list-combined-transitions.component.ts', 'transitions')(format=".")
  
  :marked
    이전 예제에서와 같이 전환의 양방향이 같은 타이밍을 가질 때
    `<=>`의 약식 구문을 사용할 수 있습니다:
  
    When both directions of a transition have the same timing, as in the previous
    example, you can use the shorthand syntax `<=>`:
  
  +makeExample('animations/ts/src/app/hero-list-twoway.component.ts', 'transitions')(format=".")
  
  :marked
    애니메이션 도중에만 적용하고 애니메이션이 끝난 후에는 적용하지 않는 스타일을 정의할 수도 있습니다.
    그런 스타일을 `transition` 안에 인라인으로 정의 할 수 있습니다. 이 예제에서 엘리먼트는 한 세트의 스타일을
    즉시 적용한 후 다음 스타일로 움직입니다. 전환이 끝나면 '상태'에 정의되지 않았기 때문에
    이러한 스타일이 유지되지 않습니다.
  
    You can also apply a style during an animation but not keep it around
    after the animation finishes. You can define such styles inline, in the `transition`. In this example,
    the element receives one set of styles immediately and is then animated to the next.
  