css3 애니메이션 요약

css3로 애니메이션 효과를 만들기 전에 @keyframes 규칙을 알아야 합니다
@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;
}

이것은 단지 가장 간단한 효과일 뿐, 더 멋지게 하려면 다른 속성과 협조해야 할 수도 있다