anchor.diff:  
   
   :marked
  +  # 내용
     # Contents
   
  +  * [예: 두 가지 상태간 전환(Transition)](#example-transitioning-between-states).
  +
     * [Example: Transitioning between two states](#example-transitioning-between-states).
  +
  +  * [상태와 전환](#states-and-transitions).
  +
     * [States and transitions](#states-and-transitions).
  +
  +  * [예: 진입과 이탈](#example-entering-and-leaving).
  +
     * [Example: Entering and leaving](#example-entering-and-leaving).
  +
  +  * [예: 다른 상태로부터의 진입과 이탈](#example-entering-and-leaving-from-different-states).
  +
     * [Example: Entering and leaving from different states](#example-entering-and-leaving-from-different-states).
  +
  +  * [애니메이션 가능한 프로퍼티와 유닛](#animatable-properties-and-units).
  +
     * [Animatable properties and units](#animatable-properties-and-units).
  +
  +  * [자동 프로퍼티 계산](#automatic-property-calculation).
  +
     * [Automatic property calculation](#automatic-property-calculation).
  +
  +  * [애니메이션 타이밍](#animation-timing).
  +
     * [Animation timing](#animation-timing).
  +
  +  * [keyframe을 활용한 다단계 애니메이션](#multi-step-animations-with-keyframes).
  +
     * [Multi-step animations with keyframes](#multi-step-animations-with-keyframes).
  +
  +  * [병렬 애니메이션 그룹](#parallel-animation-groups).
  +
     * [Parallel animation groups](#parallel-animation-groups).
  +
  +  * [애니메이션 콜백](#animation-callbacks).
  +
     * [Animation callbacks](#animation-callbacks).
   
   .l-sub-section
     :marked
  +      이 페이지의 예제는 <live-example></live-example> 에서 확인 가능합니다.
  +
         The examples in this page are available as a <live-example></live-example>.
   
   a(id="example-transitioning-between-states")
   .l-main-section
   :marked
  +  ## 빠른시작 예제: 두 가지 상태간 전환(Transition)
     ## Quickstart example: Transitioning between two states
   figure
     img(src="/resources/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px" )
   :marked
  +  모델 속성에 의해 구동되는 두 상태 사이에서
  +  엘리먼트를 전환하는 간단한 애니메이션을 만들 수 있습니다.
  +
     You can build a simple animation that transitions an element between two states
     driven by a model attribute.
   
  +  애니메이션은 `@Component` 메타데이터 내에 정의됩니다.
  +  애니메이션을 추가하기 전에 몇 가지 애니메이션 관련 기능을 임포트 해야합니다.
  +
     Animations are defined inside `@Component` metadata. Before you can add animations, you need
     to import a few animation-specific functions:
   
   +makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports')(format=".")
   
   :marked
  +  이것들을 사용하여 컴포넌트 메타데이터에서 `heroState`라 불리는 *애니메이션 트리거*를 정의 할 수 있습니다.
  +  애니메이션을 사용하여 두 상태 (`활성 상태`와 `비활성 상태`) 사이를 전환합니다.
  +  히어로가 활성화되면 엘리먼트가 약간 큰 크기와 밝은 색으로 나타납니다.
  +
     With these, you can define an *animation trigger* called `heroState` in the component
     metadata. It uses animations to transition between two states: `active` and `inactive`. When a
     hero is active, the element appears in a slightly larger size and lighter color.
  
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: 
  
  :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.
  
  