[animation] CSS - @keyframes 속성 - 애니메이션코드사용선언 (= 애니사용 = 골뱅이키프레임즈속성, IE10)

@keyframes 예제

 

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  position :relative;

  -webkit-animation: homzzang 5s infinite; /* 사파리 4.0 - 8.0 */

  animation: homzzang 5s infinite;

}

/* 사파리 4.0 - 8.0 */

@-webkit-keyframes homzzang {

  from {top: 0px;}

  to {top: 200px;}

}

@keyframes homzzang {

  from {top: 0px;}

  to {top: 200px;}

}

</style>

<div></div>

결과보기

@keyframes 정의

 

@keyframes은 애니메이션 (= 움직임) 효과 규칙을 지정할 때 사용.

 

---

 

1.

애니메이션이란, CSS 스타일이 변경되는 걸 의미하며, 여러 번 변경 가능.

 

2.

애니메이션 시작 부분 표현 : 0% 또는 from 사용
애니메이션 끝난 부분 표현 : 100 % 또는 to 사용

 

3.
브라우저 최적 지원 위해 항상 0 % 및 100 % 둘다 지정 권장.

4.

애니메이션 모양 제어 및 애니메이션을 선택자에 묶으려면 animation 속성들 이용.

5.

! important 규칙은 키 프레임에서 무시됨. (마지막 예제 참조)

6.
IE10 이상 주요 최신브라우저 지원.

 

@keyframes 구문

 

@keyframesanimation_name {keyframes_selector {CSS_code}}

 

---

[속성값]

 

animation_name
필수. 애니메이션 이름 지정.

keyframes_selector
필수. 애니메이션 지속 시간의 백분율.

 

[퍼센트로 표현]

0 - 100 %

 

[from, to로 표현]

from (= 0 %와 동일)

to (= 100 %와 동일)

[참고] 하나의 애니메이션에서 많은 키프레임선택자 사용 가능.

 

CSS_code
필수. 하나 이상의 유효한 CSS 스타일 속성.

@keyframes 예제1 - 여러 키프레임 선택자 사용

 

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  position: relative;

  -webkit-animation: homzzang 5s infinite; 

  animation: homzzang 5s infinite;

}

@-webkit-keyframes homzzang {

  0%   {top: 0px;}

  25%  {top: 500px;}

  75%  {top: 100px}

  100% {top: 250px;}

}

@keyframes homzzang {

  0%   {top: 0px;}

  25%  {top: 500px;}

  75%  {top: 100px}

  100% {top: 250px;}

}

</style>

<div></div>

결과보기

@keyframes 예제2 - 여러 CSS 스타일 적용

 

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  position: relative;

  -webkit-animation: homzzanng 5s infinite; 

  animation: homzzanng 5s infinite;

}

@-webkit-keyframes homzzanng {

  0%   {top: 0px; background: red; width: 100px;}

  100% {top: 200px; background: blue; width: 300px;}

}

@keyframes homzzanng {

  0%   {top: 0px; background: red; width: 100px;}

  100% {top: 200px; background: blue; width: 300px;}

}

</style>

<div></div>

결과보기

@keyframes 예제3 - 여러 키프레임선택자와 CSS 스타일

 

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  position: relative;

  -webkit-animation: homzzang 5s infinite;

  animation: homzzang 5s infinite;

}

@-webkit-keyframes homzzang {

  0%   {top: 0px; left: 0px; background: red;}

  25%  {top: 0px; left: 100px; background: blue;}

  50%  {top: 100px; left: 100px; background: yellow;}

  75%  {top: 100px; left: 0px; background: green;}

  100% {top: 0px; left: 0px; background: red;}

}

@keyframes homzzang {

  0%   {top: 0px; left: 0px; background: red;}

  25%  {top: 0px; left: 100px; background: blue;}

  50%  {top: 100px; left: 100px; background: yellow;}

  75%  {top: 100px; left: 0px; background: green;}

  100% {top: 0px; left: 0px; background: red;}

}

</style>

<div></div>

결과보기

@keyframes 예제4 - 키프레임에서는 !important 규칙 무시

 

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  position :relative;

  -webkit-animation: homzzang 5s infinite;  

  animation: homzzang 5s infinite;

}

@-webkit-keyframes homzzang {

  from {top: 0px;}

  50% {top:500px !important}

  to {top: 200px;}

}

@keyframes homzzang {

  from {top: 0px;}

  50% {top: 500px !important} /* 적용 X */

  to {top: 200px;}

}

</style>

<div></div>

 

결과보기

@keyframes 예제5 - 이미지 슬라이드

 

<style>

body {

    margin: 0;

}

.image {

    height: auto;

    width: 100%;

    margin: auto;

    position: relative;

}

.one {

    background-color:#202020;

    animation-name: fadeIn;

    animation-duration: 1s;

    animation-fill-mode: forwards;

    z-index: 1;

    position: absolute;

}

.two {

    animation-name: fadeIn;

    animation-duration: 10s;

    animation-fill-mode: forwards;

    z-index: 1;

    position:absolute;

}

.three {

    animation-name: fadeIn;

    animation-duration: 20s;

    animation-fill-mode: forwards;

    z-index: 1;

    position: absolute;

}

.four {

    animation-name: fadeIn;

    animation-duration: 40s;

    animation-fill-mode: forwards;

    z-index: 1;

    position: absolute;

}

.five {

    animation-name: fadeIn;

    animation-duration: 60s;

    animation-fill-mode: forwards;

    z-index: 1;

    position: absolute;

}

.six {

    animation-name: fadeIn;

    animation-duration: 80s;

    animation-fill-mode: forwards;

    z-index: 1;

    position: absolute;

}

@keyframes fadeIn { 

    0% { opacity: 0; }

    50% { opacity: 0; }

    100% { opacity: 1; }

}
</style>

<div class="images">

<img src="https://images.unsplash.com/photo-1504700610630-ac6aba3536d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" class="one image" />

<img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" class="two image" />

<img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" class="three image" />

<img src="https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1636&q=80" class="four image" />

<img src="https://images.unsplash.com/photo-1500829243541-74b677fecc30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1510&q=80" class="five image" />

<img src="https://images.unsplash.com/photo-1471513671800-b09c87e1497c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" class="six image" />

</div>

 

결과보기