CSS - 애니메이션

 

 

애니메이션

 

• transition
  • transition-duration : 애니메이션 효과 시간 설정
  • transition-property : 애니메이션 효과를 적용할 프로퍼티
  • transition-timing-function : 트랜지션 진행별 속도 설정
  • transition-delay : 트랜지션 시작 시간 지연

 

• transform
• keyframes

---

 

 

 

 

 

 

 

transition

 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 의미

 

transition-duration

 

• 트랜지션 진행 시간 지정

 

.box {
    width : 100px;
    height : 100px;
    background: red;
    border : 1px solid black;
}

.duration {
    /* 트랜지션이 진행되는 시간을 지정하는 속성 (s or ms)*/
    transition-duration: 5s;
}

.duration:hover {
    background: yellow;
}

<div class="box duration"></div>

트랜지션 진행 시간 지정하기

마우스를 올리면 트랜지션이 5초동안 진행되는 것을 볼 수 있다.

---

 

transition-property

 

• 애니메이션 효과를 적용할 프로퍼티 목록을 정의

 

.box {
    width : 100px;
    height : 100px;
    background: red;
    border : 1px solid black;
}

.property {
    /* 트랜지션을 적용할 속성을 선택하며 여러 개를 선택한 경우
    , 로 구분하여 나열함 */
    transition-property: background-color, transform, width, height;
    /* 트랜지션이 진행되는 시간을 지정하는 속성
    여러 개를 설정할 경우 , 로 구분하고 property 값과 1:1 대응 */
    transition-duration: 2s, 3s, 1s, 10s;
}

.property:hover {
    width : 200px;
    height : 200px;
    background: yellow;
    transform: rotate(180deg);
}

<div class="box property"></div>

트랜지션 진행별 시간 설정하기

---

 

transition-timing-function

 

• 트랜지션 진행별 속도 설정
• 변화 속도 : linear, ease, ease-in, ease-out, ease-in-out

 

.box {
    width : 100px;
    height : 100px;
    background: red;
    border : 1px solid black;
}

.timing {
    transition-duration: 10s;
}

input:checked ~ .timing {
    background: yellow;
    width : 100%;
}


.timing:nth-of-type(1) {
    transition-timing-function: linear;
}

<label>시작 : </label>
<input type="checkbox">
<p>linear</p>
<div class="box timing"></div>

트랜지션 진행별 속도 지정하기

transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
베지어 곡선 : 컴퓨터 그래픽스에서 사용되는 특별한 형태의 곡선으로, CSS 애니메이션 등에서 도형을 그릴 때 사용
* 참고 : https://cubic-bezier.com

시작 :

linear

---

 

transition-delay

 

• 트랜지션 시작 시간 지연

 

.delay {
    transition-duration: 3s;
    transition-property: all;
    transition-timing-function: ease-in;
    transition-delay: 2s;
}

.delay:hover {
    transform: rotate(180deg);
    background : yellow;
}

<h3>트랜지션 시간 지연하기</h3>
<div class="box delay"></div>

트랜지션 시간 지연하기

마우스를 빨간 박스에 올리면 2초뒤에 트랜지션 실행

 

---

 

 

transform

 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것을 변형이라 하고 transform 속성에 변형 함수를 사용해서 나타낼 수 있다. 

 

• translate(x,y) : 지정한 크기만큼 x축 y축으로 이동
• scale(x,y) : 지정한 크기만큼  x축 y축으로 확대/축소
• rorate(각도) : 지정한 각도만큼 회전
• skew(x,y) : 지정한 각도만큼 x축과 y축으로 요소 변형

---

 

 

keyframes

• @keyframes을 사용하면 간단한 애니메이션 여러 개를 한꺼번에 실행할 수 있음
• 애니메이션 이름과 CSS 속성을 시점을 나누어 설정 ( from { } to { }  or 0% { } 50% { } 100% { } 등)
• animation-name : 애니메이션 이름
• animation-duration : 애니메이션 실행 시간
• animation-direction : 애니메이션 반복 방향 (처음부터, 끝나면 다시 역순으로)
• animation-iteration-count : 반복 횟수 (숫자 또는 무한)

 

 

시작 지점과 끝 지점 두 개만 있는 경우

 

.box {
    width : 100px;
    height : 100px;
    background: red;
    border : 1px solid black;
}

@keyframes jump {
    from {
        margin-left: 300px;
    }
    to {
        margin-left : 100px;
        margin-bottom : 200px;
    }
}

/* 애니메이션 jump를 #jump <div>에 적용 */
#jump {
    /* keyframes에서 정한 이름을 작성 */
    animation-name: jump;
    /* 애니메이션의 실행 시간을 지정하는 속성 */
    animation-duration: 2s;
    /* 애니메이션을 얼만큼 반복할지 설정 */
    animation-iteration-count: 5;
    /* 애니메이션 반복 시 처음부터 시작 or 끝에서 역순으로 */
    animation-direction: normal;
}

 <div class="box pika" id="jump" ></div>

jump 애니메이션

애니메이션 반복이 10번이므로 새로고침해서 보세요

---

---

 

중간 작업이 있는 경우

 

.box {
    width : 100px;
    height : 100px;
    background: red;
    border : 1px solid black;
}

@keyframes shake {
    0% {
        border : 5px solid black;
    }
    50% {
        margin-left : 300px;
        border : 10px solid black;
        border-radius: 50%;
        transform: translate(50px, 50px);
    }
    100% {
        margin-left : 600px;
        border : 5px solid black;
        transform : rotate(45deg);
    }
}

/* 애니메이션 shake를 #shake img에 적용 */
#shake {
    /* alternate : 반복 시 역순으로 
       infinite : 무한 반복 */
    animation: shake 2s alternate infinite;
}

<div class="box" id="shake"></div>

중간 작업이 있는 애니메이션