ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSS - 애니메이션
    기본 2022. 2. 15. 18:01
    728x90
    반응형

     

     

    애니메이션

     

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

     


     

     

     

     

     

     

     

    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>
    13_애니메이션

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

    마우스를 올리면 트랜지션이 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>
    13_애니메이션

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


     

    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>
    13_애니메이션

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

    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>
    13_애니메이션

    트랜지션 시간 지연하기

    마우스를 빨간 박스에 올리면 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>
    13_애니메이션

    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>
    13_애니메이션

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

     

    728x90
    반응형

    '기본' 카테고리의 다른 글

    CSS - 레이아웃 스타일(Grid)  (0) 2022.02.15
    CSS - 레이아웃 스타일(Flexbox)  (0) 2022.02.15
    CSS - 레이아웃 스타일  (0) 2022.02.15
    CSS - 테두리 스타일  (0) 2022.02.15
    CSS - 색상 배경 스타일  (0) 2022.02.15

    댓글

Designed by Tistory.