CSS3기본 튜토리얼

CSS3 애니메이션(Animations)

CSS3애니메이션 기능은 키 프레임 애니메이션을 생성할 수 있도록 합니다.

CSS 애니메이션을 생성하려면 CSS3애니메이션

이전 장에서 단순한 애니메이션을 어떻게 수행하는지 배웠습니다. 예를 들어 CSS3속성을 하나의 값에서 다른 값으로 애니메이션으로 변환하는 전환 기능입니다. 하지만 CSS3트랜지션은 시간에 따라 애니메이션의 변화를 거의 제어할 수 없습니다.

CSS3애니메이션은 키 프레임 기반 애니메이션에서 한 단계 더 진화하여, CSS 속성을 시간에 따라 변화하는 단계별로 지정할 수 있게 합니다. 예를 들어, Flash 애니메이션과 유사합니다.

CSS 애니메이션은 두 단계 과정입니다. 아래의 예제를 참조하세요:

CSS 애니메이션을 구축하는 첫 번째 단계는 각 키 프레임을 정의하고, 키 프레임을 사용하여 애니메이션의 이름을 지정하는 것입니다.
두 번째 단계는 애니메이션을 사용하여-이름 속성은 키 프레임을 이름으로 참조하고, 애니메이션을 추가하여-지속 시간과 다른 선택 사항애니메이션 속성애니메이션의 행동을 지정하는 방법을 보여줍니다.

그러나, 키 프레임 규칙을 참조하거나 적용하기 전에 키 프레임 규칙을 정의할 필요는 없습니다. 아래의 예제는 CSS를 사용하여3애니메이션 기능은<div>박스가 하나의 위치에서水平的 다른 위치로 이동하는 애니메이션을 설정합니다.

예제

.box {
　　　　너비:　50px;
　　　　높이:　50px;
　　　　배경: 빨간색;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-이름: moveit;
　　　　-webkit-animation-지속시간:　2초;
　　　　
　　　　animation-이름: moveit;
　　　　animation-지속시간:　2초;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

테스트를 보세요‹/›

두 가지 속성을 적어도 지정해야 합니다.-이름과 애니메이션-지속 시간(0보다 큰 값)이 필요합니다. 그러나 다른 모든애니메이션 속성은 선택 사항입니다. 그들의 기본 값은 애니메이션 발생을 방해하지 않기 때문입니다.

주의:모든 CSS 속성이 애니메이션 가능하지 않습니다. 일반적으로 숫자, 길이, 백분율 또는 색상 값을 받아들이는 모든 CSS 속성은 애니메이션 가능합니다.

키 프레임 정의

키 프레임은 애니메이션의 각 단계의 애니메이션 속성 값을 지정하는 데 사용됩니다. 키 프레임은 특별한CSS 규칙-@keyframes에서 지정된.100％）。 선택자는 애니메이션 중 키 프레임의 구축 위치를 지정하는 데 사용됩니다.

백분율은 애니메이션 지속 시간의 백분율을 의미하며, 0％는 애니메이션의 시작점을 의미합니다.100％는 끝점을 의미합니다.50％는 중점을, 이어서 계속됩니다. 이는2초의 애니메이션에서50％의 키 프레임은 애니메이션에서1초。

예제

.box {
　　　　너비:　50px;
　　　　높이:　50px;
　　　　여유:　100px;
　　　　배경: 빨간색;
　　　　position:　relative;
　　　　left: 0;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-이름: shakeit;
　　　　-webkit-animation-지속시간:　2초;
　　　　
　　　　animation-이름: shakeit;
　　　　animation-지속시간:　2초;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}

테스트를 보세요‹/›

애니메이션 단축 속성

애니메이션을 생성할 때는 많은 속성을 고려해야 합니다. 그러나 모든 애니메이션 속성을 하나의 속성에서 지정하여 코드를 단축할 수도 있습니다.

이 animation 속성은 모든 단일 속성을 순서대로 한 번에 설정하는 데 사용되는 단축 속성입니다。애니메이션 속성。예를 들어:

예제

.box {
　　　　너비:　50px;
　　　　높이:　50px;
　　　　배경: 빨간색;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation:　repeatit　2s　linear　0s　infinite　alternate;
　　　　
　　　　animation:　repeatit　2s　linear　0s　infinite　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

테스트를 보세요‹/›

주의:지정되지 않거나 값이 누락된 경우, 해당 속성의 기본 값을 사용합니다. 즉, animation-duration 속성의 값이 누락되면 기본 값 0으로 설정되어 전환 효과가 발생하지 않습니다.

CSS3애니메이션 속성

다음 표는 모든 애니메이션 관련 속성을 간단히 요약합니다.

속성	설명
animation	모든 애니메이션 속성을 단일 선언에서 설정하는 간단한 속성입니다.
animation-이름	CSS3 @keyframes이 선택된 요소에 적용되는 정의된 애니메이션의 이름을 지정합니다.
animation-지속 시간	애니메이션이 한 주기를 완료하는 데 필요한 초 또는 밀리초를 지정합니다.
animation-타임링-기능	애니메이션의 각 주기 동안 어떻게 진행되는지 지정합니다. 즉,缓动 기능.
animation-지연	애니메이션이 언제 시작할지 지정합니다.
animation-반복-횟수	지정된 횟수만큼 애니메이션을 재생합니다.
animation-지향	애니메이션이 반복적으로 반대 방향으로 재생되는지 지정합니다.
animation-fill-모드	CSS 애니메이션이 목표에 적용되기 전과 후에 어떻게 스타일을 적용할지 지정합니다.
animation-play-상태	애니메이션은 실행되거나 중지되는지 지정합니다.
@keyframes	어느 동안 애니메이션을 실행할지 지정합니다.

CSS3 다중 열 레이아웃 CSS3 전환 효과