animation
animation
CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. animation-name
(en-US), animation-duration
, animation-timing-function
(en-US), animation-delay
, animation-iteration-count
(en-US), animation-direction
, animation-fill-mode
, animation-play-state
(en-US)의 단축 속성입니다.
시도해보기
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
애니메이션 가능한 속성을 확인해보세요. CSS 트랜지션에도 적용된다는 점을 참고하세요.
초기값 | as each of the properties of the shorthand: |
---|---|
적용대상 | all elements, ::before and ::after pseudo-elements |
상속 | no |
계산 값 | as each of the properties of the shorthand:
|
Animation type | Not animatable |
구문
The animation
property is specified as one or more single animations, separated by commas.
Each individual animation is specified as:
- zero or one occurrences of the following values:
- an optional name for the animation, which may be
none
, a<custom-ident>
(en-US), or a<string>
(en-US) - zero, one, or two
<time>
values
The order of values within each animation definition is important: the first value that can be parsed as a <time>
is assigned to the animation-duration
, and the second one is assigned to animation-delay
.
The order within each animation definition is also important for distinguishing animation-name
(en-US) values from other keywords. When parsed, keywords that are valid for properties other than animation-name
(en-US), and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for animation-name
(en-US). Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an animation-name
(en-US) that could be a value of another property, and may be output in additional cases.
값
<single-animation-iteration-count>
-
The number of times the animation is played. The value must be one of those available in
animation-iteration-count
(en-US). <single-animation-direction>
-
The direction in which the animation is played. The value must be one of those available in
animation-direction
. <single-animation-fill-mode>
-
Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in
animation-fill-mode
. <single-animation-play-state>
-
Determines whether the animation is playing or not. The value must be one of those available in
animation-play-state
(en-US).
형식 구문
animation =
<single-animation>#
<single-animation> =
<time> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> (en-US) |
<string> (en-US)
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
예제
Cylon Eye
<div class="view_port">
<div class="polling_message">
Listening for dispatches
</div>
<div class="cylon_eye"></div>
</div>
.polling_message {
color: white;
float: left;
margin-right: 2%;
}
.view_port {
background-color: black;
height: 25px;
width: 100%;
overflow: hidden;
}
.cylon_eye {
background-color: red;
background-image: linear-gradient(to right,
rgba(0, 0, 0, .9) 25%,
rgba(0, 0, 0, .1) 50%,
rgba(0, 0, 0, .9) 75%);
color: white;
height: 100%;
width: 20%;
-webkit-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
@keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
See Using CSS animations for additional examples.
접근성 고려사항
Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.
Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query (en-US) to create a complimentary experience for users who have expressed a preference for no animated experiences.
- Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
- An Introduction to the Reduced Motion Media Query | CSS-Tricks
- Responsive Design for Motion | WebKit
- MDN Understanding WCAG, Guideline 2.2 explanations (en-US)
- Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
명세
Specification |
---|
CSS Animations Level 1 # animation |
브라우저 호환성
BCD tables only load in the browser
Quantum CSS notes
- Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows (Firefox bug 1383239). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).
- Another Gecko bug means that
<details>
elements can't be made open by default using theopen
attribute if they have an animation active on them (Firefox bug 1382124). Quantum CSS fixes this. - A further bug means that animations using em units are not affected by changes to the
font-size
on the animated element's parent, whereas they should be (Firefox bug 1254424). Quantum CSS fixes this.
같이 보기
- CSS 애니메이션 사용하기
- JavaScript
AnimationEvent
API