Coding/HTML

13. CSS3와 애니메이션 : 트랜지션 /애니메이션

찡콩찡 2022. 5. 23. 15:40
트랜지션이란? 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

 

속성 설명
transition-property 트랜지션 대상을 설정
transition-duration 트랜지션 진행 시간을 설정
transition-timing-function 트랜지션 속도 곡선을 설정
transition-delay 트랜지션 지연 시간을 설정
trasition transition-property 와 transition-duration, transition-timing-function, transition-delay  속성을 한꺼번에 설정

 

▶transition-property 속성

  • 트랜지션을 적용할 속성 선택
  • 이 속성을 지정하지 않으면 모든 속성이 트랜지션 대상이 됨
속성 값 설명
all  all 값을 사용하거나 trasition-property를 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 됨
none 트랜지션 동안 아무 속성도 바뀌지 않음
<속성이름> 트랜지션 효과를 적용할 속성 이름 지정
transition-property:all /*해당 요소의 모든 속성에 트랜지션 적용*/
transition-property:background-color; /*해당 요소의 배경 색에 트랜지션 적용 */
transition-property:width,height; /*해당 요소의 너비와 높이에 트랜지션 적용*/

▶transition-duration 속성

  • 트랜지션 진행 시간 지정
  • 시간 단위는 초(seconds) 또는 밀리초(milliseconds) 
  • 트랜지션이 여러 개라면 쉼표(,)로 구분해 진행 시간 지정
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tr1 {
            width: 100px;
            height: 100px;
            background: blue;
            border: 1px solid black;
            transition-property: width, height;
            transition-duration: 2s, 1s;
        }
        .tr1:hover {
            width: 200px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="tr1"></div>
</body>
</html>

마우스를 가져가면 크기가 변경됨

▶transition-delay 속성

  • 트랜지션이 언제부터 시작될지 지연 시간 지정
  • 시간 단위 초(seconds) 또는 밀리초(milliseconds). 기본값0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ex {
            position: relative;
            width: 500px;
            height: 150px;
            margin: 0 auto; /*가운데*/
            border: 1px solid #aaa;
            border-radius: 30px;
            padding: 20px;
        }
        #ex:hover .box {
            transform: rotate(720deg);
            margin-left: 420px;            
        }
        .box {
            font-size: 12px;
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            background: #eee;
        }
        .box p {
            text-align: center; /*가운데 정렬*/
            padding-top: 4px;
        }
        #no-delay {
            transition-duration: 3s;
            border: 1px solid #ff6a00;
        }
        #delay {
            transition-duration: 3s;
            border: 1px solid #ddd56b;
            transition-delay: 1s;
        }

    </style>
</head>
<body>
    <div id="ex">
   <div class="box" id="no-delay">
       <p>no-delay</p>
   </div> 
   <div class="box" id="delay">
       <p>delay</p>
   </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
            font-size: 52px;
        }
        .tr1 {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
            transition-property: background-color, transform, width, height;
            transition-duration: 2s, 3s;
        }
        .tr1:hover {
            width: 200px;
            height: 200px;
            background: #ff6e5f;
            transform: rotate(180deg); /*108도 회전*/
        }
    </style>
</head>
<body>
    <div class="tr1">
        <h1>!</h1>
    </div>
</body>
</html>

빙글빙글 움직여

 

 

애니메이션

▶ css와 애니메이션

  • 웹 요소에 애니메이션 추가
  • 애니메이션을 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다.
  • 키프레임(keyframe):애니메이션 중간에 스타일이 바뀌는 지점

css애니메이션에서 사용하는 주요 속성

 

속성 설명
@keyframes 애니메이션이 바뀌는 지점을 설정
animation-delay 애니메이션 지연 시간을 지정
animation-direction 애니메이션 종료 후 처음부터 시작할지, 역방향으로 진행할지를 지정함
animation-duration 애니메이션 실행 시간 설정
animation-fill-mo de 애니메이션이 종료되었거나 지연되어 애니메이션이 실행되지 않는 상태일 때 요소의 스타일을 지정합니다.
animation-iteration-count 애니메이션 반복 횟수를 지정
animation-name @ekyframes로 설정해 놓은 중간 상태의 이름 지정
animation-play-state 애니메이션을 멈추거나 다시 시작
animation-timing-function 애니메이션의 속도 곡선을 지정
animation animation 하위 속성들을 한꺼번에 묶어 지정

 

▶@keyframes 속성 ★

  • 애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정
  • '이름'으로 애니메이션 구별
  • 시작위치는 0% 끝 위치는 100%놓고 위치 지정
  • 시작과 끝 위치만 사용한다면 form, to키워드 사용 가능
  • @-webkit-keyframe나 @-moz-keyframes 처럼 브라우저 접두사를 붙여야함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: blue;
            animation-name: change-bg;
            animation-duration: 3s;
        }
        @keyframes change-bg {
            form {
            background-color: blue;
            border:1px solid black;
        }
        to {
            background-color: #a5d6ff;
            border: 1px solid blue;
            border-radius: 50%;
        }
    }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

▶ animation-name 속성 

  • @keyframes 속서에서 만든 애니메이션 이름을 사용
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            float: left;
            margin: 50px;            
        }
        #box1 {
            background-color: #4cff00;
            border: 1px solid black;
            animation-name: shape;
            animation-duration: 3s;
        }
        #box2 {
            background-color: #8f06b0;
            border: 1px solid black;
            animation-name: rotate;
            animation-duration: 3s;
        }
        @keyframes shape {
            from {
                border: 1px solid black;
            }
            to {
                border: 1px solid black;
                border-radius: 50%;
            }
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(450deg);
            }
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

오른쪽에서 보이는 거와 같이 움직임

▶ animation-duration 속성

  • 애니메이션 실행 시간 설정. 기본값 0
  • 사용 가능한 값은 초(s)나 밀리초(ms)

▶ animation-direction 속성

  • 애니메이션이 끝난 후 원래 위치로 돌아가거나 반대 방향으로 애니메이션을 실행하도록 지정
속성 값 설명
normal 애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아감 *기본 값
alternate 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행

▶ animation-iteration-count 속성

  • 애니메이션 반복 횟수 지정하기
속성 값 설명
<숫자> 입력한 숫자만큼 반복합니다. 기본값 1
infinite 무한 반복합니다.

▶ animation-timing-funtion 속성

  • 애니메이션 속도 곡선 지정

▶ animation

  • 여러 개의 애니메이션 속성을 하나의 속성으로 줄여서 사용
  • 지정하지 않은 속성은 기본 값 사용. 하지만 animation-duration 속성 값은 반드시 지정해야함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 60px;
            height: 60px;
            margin: 60px;
            animation: rotate 1.5s infinite, background 1.5s infinite alternate;
        }
        @keyframes rotate {
            from {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            }
            to {
                transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            }
        }
        @keyframes background {
            from  { background: red; }
            50% {background-color: green;}   
            to  {background-color: blue; }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

alternate 때문에 뒤로 가고 다시 돌아와

 

저작자표시 비영리 (새창열림)