@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 구문
@keyframes animation_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>
결과보기
주소 복사
랜덤 이동