css3 애니메이션 요약
@keyframes 규칙은 애니메이션을 만드는 데 사용됩니다.@keyframes에서 CSS 스타일을 지정하면 현재 스타일에서 새 스타일로 변경하는 애니메이션 효과를 만들 수 있습니다.Internet Explorer 10, Firefox 및 Opera는 @keyframes 규칙 및 animation 속성을 지원합니다.Chrome과 Safari는 접두사-webkit-가 필요합니다.
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
이것과 유사하게,from, to는 0%와 100%에 해당한다. 즉, 시작과 끝의 상태인 myfirst는 당신이 정의한 애니메이션 효과 이름으로, 임의의 선택기에 묶을 수 있다.어떤 선택기에서 이 애니메이션 효과를 사용해야 할 때, 애니메이션을 사용해야 한다. 그는 쓴 애니메이션 효과를 묶을 수 있다
div
{
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
여기서 직접 복제한 w3school의 예는 애니메이션에 여러 가지 속성이 있다는 것을 쉽게 알 수 있을 것이다. 자신의 요구에 따라 찾을 수 있다. 규정된 시간, 속도, 순환 횟수 등을 포함한다. 그리고 라벨도 있다. transform transform 속성은 요소에 2D 또는 3D 변환을 응용한다.이 속성을 사용하면 요소를 회전, 배율, 이동 또는 기울일 수 있습니다.일반적으로 흔들림 회전 같은 특수효과는 해 보면 비교적 멋있다. 예를 들어 지구가 돌아가는 효과를 하고 애니메이션 효과와 트랜스포머의rotate를 결합하면 잘 실현된다.
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
좌우 흔들림 효과도 있어요.
@-webkit-keyframes shakelr
{
0% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
33% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
66% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
}
.shakelr {
transform-origin: center;
-webkit-transform-origin: center;
animation: shakelr 1s infinite alternate ease-in-out;
-webkit-animation: shakelr 1s infinite alternate ease-in-out;
}
위아래 흔들림 효과
@keyframes shaketb {
0%,100%,20%,50%,80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
}
.shaketb {
animation: shaketb 1.5s infinite alternate ease-in-out;
-webkit-animation: shaketb 1.5s infinite alternate ease-in-out;
}
이것은 단지 가장 간단한 효과일 뿐, 더 멋지게 하려면 다른 속성과 협조해야 할 수도 있다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.