[animation] CSS - @keyframes 구문 - 애니메이션 코드 사용 선언 (= 애니사용 = @keyframes속성 = 골뱅이키프레임즈속성, IE10) ※ (이미지/텍스트/문자열/여러줄/여러라인) 슬라이드

1. @keyframes 예제 - 위에서 아래로 애니효과
2. @keyframes 정의
3. @keyframes 구문
4. @keyframes 예제 - 여러 키프레임 선택자 사용
5. @keyframes 예제 - 여러 CSS 스타일 적용
6. @keyframes 예제 - 여러 키프레임선택자와 CSS 스타일
7. @keyframes 예제 - 키프레임에서는 !important 규칙 무시
8. @keyframes 예제 - 이미지 슬라이드
9. @keyframes 예제 - 여러 줄 텍스트 슬라이드
10. @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