anchor.diff:  
   .alert.is-helpful
     :marked
  +    이 예제에서는 애니메이션 메타데이터에서 인라인으로
  +    애니메이션 스타일 (색상 및 변형)을 정의하고 있습니다.
  +
       In this example, you are defining animation styles (color and transform) inline in the
       animation metadata.
   
   :marked
  +  이제 `[@triggerName]` 구문을 사용하여, 방금 정의한 애니메이션을
  +  컴포넌트 템플릿의 여러 엘리먼트에 붙이세요.
  +
     Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
     one or more elements in the component's template.
   
   +makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'template')(format=".")
   
   :marked
  +  여기서 애니메이션 트리거는 `ngFor`에 의해 반복되는 모든 엘리먼트에 적용됩니다.
  +  반복되는 각 엘리먼트는 독립적으로 움직입니다.
  +  속성의 값은 `hero.state`라는 표현식에 바인딩되어 있으며 항상 `active` 또는 `inactive`입니다.
  +
     Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
     the repeated elements animates independently. The value of the
     attribute is bound to the expression `hero.state` and is always either `active` or `inactive`.
   
  +  이 설정을 사용하면 히어로 객체가 상태를 바꿀 때마다 애니메이션 전환이 일어납니다.
  +  전체 컴포넌트 구현은 다음과 같습니다.
  +
     With this setup, an animated transition appears whenever a hero object changes state.
     Here's the full component implementation:
   
   +makeExample('animations/ts/src/app/hero-list-basic.component.ts')
   
   :marked
  +  ## 상태(state) 및 전환(transition)
     ## States and transitions
  +  Angular 애니메이션은 상태 사이의 논리적 **상태** 및 **전환**으로 정의됩니다.
   
     Angular animations are defined as logical **states** and **transitions**
     between states.
  +
  +  애니메이션 상태는 애플리케이션 코드에서 정의하는 문자열 값입니다.
  +  위의 예에서 상태 `'active'`및 `'inactive'`는 히어로 객체의 논리적 상태를 기반으로 합니다.
  +  상태의 소스는 이 경우처럼 간단한 객체 속성일 수도 있고 메소드에서 계산 된 값일 수도 있습니다.
  +  중요한 것은 그 값을 구할 수 있다는 것입니다.
   
     An animation state is a string value that you define in your application code. In the example
     above, the states `'active'` and `'inactive'` are based on the logical state of
  
positive.code:   can control the easing by adding it as a *third* value in the string after the duration
    and the delay (or as the *second* value when there is no delay):
  
    * Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'`
    * Run for 200ms, with easing: `'0.2s ease-in-out'`
  
  figure
    img(src="/resources/images/devguide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px" )
  :marked
    ### Example
  
    Here are a couple of custom timings in action. Both enter and leave last for
    200 milliseconds but they have different easings. The leave begins after a
  
negative.code: 
  .l-sub-section
    :marked
      이 두 가지 공통 애니메이션에는 고유 한 별칭이 있습니다:
  
      These two common animations have their own aliases:
    code-example(language="typescript").
      transition(':enter', [ ... ]); // void => *
      transition(':leave', [ ... ]); // * => void
  
  :marked
    ## 예: 다른 상태에서의 진입과 이탈
    ## Example: Entering and leaving from different states
  figure
    img(src="/resources/images/devguide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px" )
  :marked
    히어로 상태를 애니메이션 상태로 사용하여 이 애니메이션을 이전 상태 전환
    애니메이션과 결합 할 수도 있습니다.
    히어로의 상태에 따라 입출력을 위한 다양한 전환을 구성 할 수 있습니다.
  
    You can also combine this animation with the earlier state transition animation by
    using the hero state as the animation state. This lets you configure
    different transitions for entering and leaving based on what the state of the hero
    is:
  
    * 비활성 히어로 진입: `void => inactive`
  
    * Inactive hero enter: `void => inactive`
  
    * 활성 히어로 진입: `void => active`
  
    * Active hero enter: `void => active`
  
    * 비활성 히어로 이탈: `inactive => void`
  
    * Inactive hero leave: `inactive => void`
  
    * 활성 히어로 이탈 : `active => void`
  
    * Active hero leave: `active => void`
  
    이렇게 하면 각 전환에 대해 세밀한 제어가 가능합니다:
  
    This gives you fine-grained control over each transition:
  
  