CSS 애니메이션

정의 및 사용

일부 CSS 특성은 애니메이션 및 전환에 이용 될 수 있음을 의미 애니메이션이다.

애니메이션 속성은 크기, 숫자, 백분율 및 색상처럼, 다른 하나의 값에서 점차적으로 변경할 수 있습니다.

브라우저 지원

표의 수치는 완전히 CSS 애니메이션을 지원하는 제 브라우저 버전을 지정한다.

숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.


4.0 -webkit-	10.0	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -O-

예

빨간색에서 파란색의 배경 색상을 애니메이션 :

/* Code for Chrome, Safari and Opera */
@-webkit-keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

/* Standard syntax */
@keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

»그것을 자신을 시도

애니메이션 속성

이러한 속성은 CSS에서 애니메이션입니다 :

재산
background Try it
background-color Try it
background-position Try it
background-size Try it
border Try it
border-bottom Try it
border-bottom-color Try it
border-bottom-left-radius Try it
border-bottom-right-radius Try it
border-bottom-width Try it
border-color Try it
border-left Try it
border-left-color Try it
border-left-width Try it
border-right Try it
border-right-color Try it
border-right-width Try it
border-spacing Try it
border-top Try it
border-top-color Try it
border-top-left-radius Try it
border-top-right-radius Try it
border-top-width Try it
bottom Try it
box-shadow Try it
clip Try it
color Try it
column-count Try it
column-gap Try it
column-rule Try it
column-rule-color Try it
column-rule-width Try it
column-width Try it
columns Try it
filter Try it
flex
flex-basis Try it
flex-grow Try it
flex-shrink Try it
font Try it
font-size Try it
font-size-adjust
font-stretch
font-weight Try it
height Try it
left Try it
letter-spacing Try it
line-height Try it
margin Try it
margin-bottom Try it
margin-left Try it
margin-right Try it
margin-top Try it
max-height Try it
max-width Try it
min-height Try it
min-width Try it
opacity Try it
order Try it
outline Try it
outline-color Try it
outline-offset Try it
outline-width Try it
padding Try it
padding-bottom Try it
padding-left Try it
padding-right Try it
padding-top Try it
관점은 그것을 시도
perspective-origin Try it
right Try it
text-decoration-color Try it
text-indent Try it
text-shadow Try it
top Try it
transform Try it
transform-origin Try it
vertical-align Try it
visibility
width Try it
word-spacing Try it
z-index Try it

❮ 이전 다음 참조 ❯

CSS 참고

CSS 속성

CSS 애니메이션

정의 및 사용

브라우저 지원

예

애니메이션 속성