목차
- @keyframes 예제 - 위에서 아래로 애니효과
- @keyframes 정의
- @keyframes 구문
- @keyframes 예제 - 여러 키프레임 선택자 사용
- @keyframes 예제 - 여러 CSS 스타일 적용
- @keyframes 예제 - 여러 키프레임선택자와 CSS 스타일
- @keyframes 예제 - 키프레임에서는 !important 규칙 무시
- @keyframes 예제 - 이미지 슬라이드
- @keyframes 예제 - 여러 줄 텍스트 슬라이드
- @keyframes 예제 - 여러 줄 텍스트 상하 롤링
@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 정의
애니메이션 (= 움직임) 효과 규칙을 지정할 때 사용.
1.
애니메이션이란, CSS 스타일이 변경되는 걸 의미하며, 여러 번 변경 가능.
2.
- 애니메이션 시작 부분 표현 : 0% 또는 from 사용
- 애니메이션 끝난 부분 표현 : 100 % 또는 to 사용
3.
- 브라우저 최적 지원 위해 항상 0 % 및 100 % 둘다 지정 권장.
- 애니메이션 모양 제어 및 애니메이션을 선택자에 묶으려면 animation 속성들 이용.
- ! important 규칙은 키 프레임에서 무시됨. (아래 '이미지 슬라이드' 예제 참고)
4.
IE10 이상 주요 최신브라우저 지원.
@keyframes 구문
@keyframes animationName {
keyframesSelector {CSS_code}
keyframesSelector {CSS_code}
...
}
[속성값]
animationName
필수. 애니메이션 이름 지정.
keyframesSelector
필수. 애니메이션 지속 시간의 백분율. (2가 방식 가능)
- 퍼센트 사용: 0 - 100 %
- from, to 사용: from (= 0 %와 동일) / to (= 100 %와 동일)
- PS. 하나의 애니메이션에서 여러 키프레임선택자 사용 가능.
CSS_code
필수. 하나 이상의 유효한 CSS 스타일 속성.
@keyframes 예제 - 여러 키프레임 선택자 사용
<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 예제 - 여러 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 예제 - 여러 키프레임 선택자와 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 예제 - 키프레임에서는 !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 예제 - 이미지 슬라이드
<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>
결과보기
@keyframes 예제 - 여러 줄 텍스트 슬라이드
[예제1] 우측에서 좌측으로 한줄씩 나타나는 효과
<style>
.hz p {
opacity: 0;
animation-name: hz_ani;
animation-duration: 1s;
animation-fill-mode: forwards;
font-size:20px;
}
.hz p:nth-child(1) { animation-delay: 0.2s; }
.hz p:nth-child(2) { animation-delay: 0.4s; }
.hz p:nth-child(3) { animation-delay: 0.6s; }
.hz p:nth-child(4) { animation-delay: 0.8s; }
.hz p::first-letter {
color: red;
font-weight:bold;
}
@keyframes hz_ani {
from { opacity: 0; margin-left: 5em; }
to { opacity: 1; margin-left: 0; }
}
</style>
<div class="hz">
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
<p>홈페이지 제작관리</p>
<p>그누보드 기초강의</p>
</div>
결과보기
[예제2] - 한 줄씩 나타나는 효과
<style>
.hz p {
opacity: 0;
animation-name: hz_ani;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.hz p:nth-child(1) { animation-delay: 0.2s; }
.hz p:nth-child(2) { animation-delay: 0.4s; }
.hz p:nth-child(3) { animation-delay: 0.6s; }
.hz p:nth-child(4) { animation-delay: 0.8s; }
@keyframes hz_ani {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<div class="hz">
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
<p>홈페이지 제작관리</p>
<p>그누보드 기초강의</p>
</div>
결과보기
예제1 - 배르만 님 (230327) https://sir.kr/qa/494875
예제2 - 배르만 님 (230331) https://sir.kr/qa/495259
@keyframes 예제 - 여러 줄 텍스트 상하 롤링
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {font-family:'Roboto';}
#box {
width:360px;
margin:0 auto;
color:#999;
text-transform: uppercase;
font-size:25px;
font-weight:bold;
border:0px solid blue;
text-align:center;
}
#box h1 {font-size:25px;}
#hz {
margin:0;
padding:0;
height:50px;
overflow:hidden;
}
#hz li {
margin:0;
padding:0;
color:#fff;
line-height:50px;
height:50px;
}
#hz li {background:green;}
#hz li:first-child {background:red;}
#hz li:last-child {background:blue;}
#hz li:first-child {
animation: show 7s linear infinite;
}
@keyframes show {
0% {margin-top:-250px;}
5% {margin-top:-200px;}
20% {margin-top:-200px;}
35% {margin-top:-150px;}
40% {margin-top:-150px;}
55% {margin-top:-100px;}
60% {margin-top:-100px;}
75% {margin-top:-50px;}
80% {margin-top:-50px;}
95% {margin-top:0px;}
99.9% {margin-top:0px;}
100% {margin-top:-250px;}
}
#box p {margin:0; line-height:50px;}
</style>
<div id='box'>
<h1>코딩 공부하기 좋은 사이트</h1>
<ul id='hz'>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리</li>
<li>그누보드 기초강의</li>
<li>서버세팅 서버관리</li>
</ul>
<p>Since 2012</p>
</div>
결과보기
관련글: https://sir.kr/qa/496249
