2nd/10_Wiki/Topic_CSS/CSS_Animations_Properties.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-animation-properties	CSS Animation Properties	Frontend	draft	conceptual		animation-direction animation-fill-mode animation shorthand animation-play-state alternate forwards		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools animation shorthand fill-mode	https://www.w3schools.com/css/css3_animations_properties.asp

CSS Animation Properties

🎯 한 줄 통찰 (One-line insight)

animation-direction controls forward/backward/alternating playback, animation-fill-mode controls the element's style when the animation is not playing, and the animation shorthand packs all the individual animation properties into one declaration. [S1]

🧠 핵심 개념 (Core concepts)

• animation-direction — specifies whether an animation should be played forwards, backwards, or in alternate cycles. [S1]
• animation-fill-mode — specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). [S1]
• animation shorthand — sets all the animation properties in a single declaration. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Playback direction — choose normal, reverse, alternate, or alternate-reverse (alternation needs an iteration count > 1 to be visible). [S1]
• Persisting end/start state — use animation-fill-mode: forwards to keep the last keyframe's style, backwards for the first keyframe during delay, or both. [S1]
• Shorthand ordering — animation: name duration timing-function delay iteration-count direction;. [S1]

📖 세부 내용 (Details)

The animation-direction Property The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The animation-direction property can have the following values: [S1]

• normal — the animation is played as normal (forwards). This is default. [S1]
• reverse — the animation is played in reverse direction (backwards). [S1]
• alternate — the animation is played forwards first, then backwards. [S1]
• alternate-reverse — the animation is played backwards first, then forwards. [S1]

The following example will run the animation in reverse direction (backwards): [S1]

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-direction: reverse;
}

The following example uses the value "alternate" to make the animation run forwards first, then backwards: [S1]

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards: [S1]

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

The animation-fill-mode Property The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). The animation-fill-mode property can have the following values: [S1]

• none — default value. Animation will not apply any styles to the element before or after it is executing. [S1]
• forwards — the element will retain the style values that are set by the last keyframe (depends on animation-direction and animation-iteration-count). [S1]
• backwards — the element will get the style values that are set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period. [S1]
• both — the animation will follow the rules for both forwards and backwards, extending the animation properties in both directions. [S1]

The following example lets the <div> element retain the style values from the last keyframe when the animation ends: [S1]

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

The following example lets the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period): [S1]

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

The following example lets the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends: [S1]

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Animation Shorthand Property The animation properties can be specified one by one, like this: [S1]

div {
  animation-name: myAnimation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

The same animation effect as above can be achieved by using the shorthand animation property: [S1]

div {
  animation: myAnimation 5s linear 2s infinite alternate;
}

CSS Animation Properties The following table lists the @keyframes rule and all the CSS animation properties: [S1]

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

🛠️ 적용 사례 (Applied in summary)

The page applies reverse, alternate, and alternate-reverse directions to a <div>, the forwards/backwards/both fill modes, and shows the same animation expressed both as individual properties and as the animation shorthand (myAnimation 5s linear 2s infinite alternate). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Individual properties vs. shorthand (language: CSS):

div {
  animation-name: myAnimation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {
  animation: myAnimation 5s linear 2s infinite alternate;
}

Fill mode to retain end state:

div {
  animation-fill-mode: forwards;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

For animation-direction, pick normal for plain forward playback, reverse to run backwards, alternate to bounce forward-then-back, and alternate-reverse to bounce back-then-forward (the alternating options require an iteration count above 1). For animation-fill-mode, use forwards to keep the final keyframe's appearance after the animation ends, backwards to apply the first keyframe during the delay, both for both effects, and none (default) to apply no styles outside the active run. The animation shorthand is preferred for conciseness when several properties are set together. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Animations, CSS Animation Timing, CSS Transition Timing
• 참조 맥락: Completes the animation feature set with direction, fill-mode, and the shorthand that consolidates all animation properties.

📚 출처 (Sources)

• [S1] W3Schools — CSS Animation Properties — https://www.w3schools.com/css/css3_animations_properties.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Animation Properties" page (Astra wiki-curation, P-Reinforce v3.1 format).