[HTML+CSS][CSS3와 애니메이션] 03

[HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들

[HTML+CSS][CSS3와 애니메이션] 01 - 변형 [HTML+CSS][다재다능한 CSS3 선택자] 03 - 가상 클래스와 가상 요소 [HTML+CSS][다재다능한 CSS3 선택자] 02 - 속성 선택자 [HTML+CSS][다재다능한 CSS3 선택자] 01 - 연..

onelight-stay.tistory.com

여태까지 단순한 변형에 대해서만 알아보았다면

이번에는 완전히 다른 스타일로 바꿀 수 있는

트랜지션에 대해서 알아보자.

트랜지션 (transition)

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

transition-property 속성 : 트랜지션 적용할 속성 지정

트랜지션을 어느 속성에 적용할 것인지 선택하는 것으로

해당 속성을 사용하지 않을 경우,

모든 속성이 트랜지션 대상이 되고

특정 속성 이름을 입력하면 그 속성에 트랜지션이 적용된다.

transition-duration 속성 : 트랜지션 진행시간 지정

해당 속성을 사용해 정해놓은 시간 동안 속성이 자연스럽게 바뀌는 애니메이션 효과로

초(seconds) 또는 밀리초(milliseconds)로 나타낸다.

이때, 트랜지션 대상이 되는 속성이 여러 개라면

쉼표로 구분해 여러 개를 지정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-duration</title>
    <style>
        .trduration {
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 2px black solid;
            -webkit-transition-property: width, height;
		    -moz-transition-property: width, height;
		    -o-transition-property: width, height;
		    transition-property: width, height; /* 트랜지션 적용대상 : 너비와 높이 */
		    -webkit-transition-duration: 2s, 1s;
		    -moz-transition-duration: 2s, 1s;
		    -o-transition-duration: 2s, 1s;
		    transition-duration: 2s, 1s; /* 너비는 2초, 높이는 1초만에 적용 */
        }
        .trduration:hover {
            width: 200px;
            height: 120px;
        }
    </style>
</head>
<body>
    <h3>정해진 시간 동안 높이와 너비 바꾸기</h3>
    <div class="trduration"></div>
</body>
</html>

transition-property에서 지정한 속성의 개수와 transition-duration에서 지정한 시간의 개수가 일치할 경우
속성 값에서 지정한 순서대로 시간을 적용할 수 있는데,
만약 속성의 개수와 시간의 개수가 일치하지 않을 경우

transition-duration이 transition-property의 개수에
맞게 순서대로 반복 적용해 주면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-duration</title>
    <style>
        .trduration2 {
            width: 100px;
            height: 100px;
            background-color: red;
            border: black 2px solid;
            text-align: center;
            -webkit-transition-property: background-color, transform, width, height;
            -moz-transition-property: background-color, transform, width, height;
            -o-transition-property: background-color, transform, width, height;
            transition-property: background-color, transform, width, height;
            -webkit-transition-duration: 2s, 3s;
		    -moz-transition-duration: 2s, 3s;
		    -o-transition-duration: 2s, 3s;
            transition-duration: 2s 3s; /* 트랜지션 적용대상 번갈아가며 적용 */
        }
        .trduration2:hover {
            background-color: pink; /* 2초 걸쳐 트랜지션 */
            -webkit-transform: rotate(180deg);
		    -moz-transform: rotate(180deg);
		    -o-transform: rotate(180deg);
		    -ms-transform: rotate(180deg);
            transform: rotate(180deg); /* 3초 걸쳐 트랜지션 */
            width: 200px; /* 2초 걸쳐 트랜지션 */
            height: 200px; /* 3초 걸쳐 트랜지션 */
        }
    </style>
</head>
<body>
    <h3>정해진 시간 동안 배경 색과 회전, 높이, 너비 바꾸기</h3>
    <div class="trduration2"><h1>도형</h1></div>
</body>
</html>

transition-timing-function 속성 : 트랜지션 속도 곡선 지정

시작과 중간, 끝에서의 속도를 지정해 속도 곡선을 만들어 주는 것으로
속도 곡선은 미리 정해진 키워드나 '베지에 곡선'을 이용해 표현한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-timing-function</title>
    <style>
        #tfunction div{
            float: left;
            width: 100px;
            height: 50px;
            margin: 5px 10px;
            padding: 5px;
            color: white;
            background-color: rgb(160, 80, 120);
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
        }
        #tfunction:hover div {height: 400px;}
        #tfunction .linear1 {
            -webkit-transition: 3s linear;
            -moz-transition: 3s linear;
            -o-transition: 3s linear;
            transition: 3s linear;
        }
        #tfunction .ease1 {
            -webkit-transition: 3s ease;
            -moz-transition: 3s ease;
            -o-transition: 3s ease;
            transition: 3s ease;
        }
        #tfunction .ease-in1 {
            -webkit-transition: 3s ease-in;
            -moz-transition: 3s ease-in;
            -o-transition: 3s ease-in;
            transition: 3s ease-in;
        }
        #tfunction .ease-out1 {
            -webkit-transition: 3s ease-out;
            -moz-transition: 3s ease-out;
            -o-transition: 3s ease-out;
            transition: 3s ease-out;
        }
        #tfunction .ease-in-out1 {
            -webkit-transition: 3s ease-in-out;
            -moz-transition: 3s ease-in-out;
            -o-transition: 3s ease-in-out;
            transition: 3s ease-in-out;
        }
    </style>
</head>
<body>
    <h3>트랜지션 속도 곡선 속성값</h3>
    <div id="tfunction">
        <div class="linear1">linear</div>
        <div class="ease1">ease</div>
        <div class="ease-in1">ease-in</div>
        <div class="ease-out1">ease-out</div>
        <div class="ease-in-out1">ease-in-out</div>
    </div>
</body>
</html>

transition-delay 속성 : 지연 시간 설정

트랜지션이 언제부터 시작할 것인지를 설정하는 것으로
지정한 시간만큼 기다렸다가 트랜지션이 시작된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-delay</title>
    <style>
        #trdelay {
            position: relative;
            width: 500px;
            height: 150px;
            margin: 0 auto;
            border: 2px solid gray;
            border-radius: 30px;
            padding: 20px;
        }
        #trdelay:hover .box {
            -webkit-transform: rotate(720deg);
            -moz-transform: rotate(720deg);
            -ms-transform: rotate(720deg);
            -o-transform: rotate(720deg);
            transform: rotate(720deg);
            margin-left: 420px;

        }
        .box {
            font-size: 12px;
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            background-color: lightgray;
        }
        .box p {
            text-align: center;
            padding-top: 4px;
        }
        #no-delay {
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;
            transition-duration: 3s;
            border: 2px solid rgb(255, 136, 0);
        }
        #delay {
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;
            transition-duration: 3s;
            -webkit-transition-delay: 1s;
		    -moz-transition-delay: 1s;
		    -o-transition-delay: 1s;
		    transition-delay: 1s;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <h3>특정 시간 후에 트랜지션 실행하기</h3>
    <div id="trdelay">
        <div id="no-delay" class="box"><p>no-delay</p></div>
        <div id="delay" class="box"><p>delay</p></div>
    </div>
</body>
</html>

transition 속성 : 트랜지션 속성 한꺼번에 표기

트랜지션 적용 대상이 전체이고 트랜지션 실행 시간이 대상별로 다르지 않을 경우에

한꺼번에 지정해 사용하기 편리한 속성으로
나열 순서만 제대로 입력하면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style>
        .tr {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 2px black solid;
            -webkit-transition: 2s ease-in;
            -moz-transition: 2s ease-in;
            -o-transition: 2s ease-in;
            transition: 2s ease-in;
            /* transition-property 기본값 all
            transition-duration 값 2s
            transition-timing-function 값 ease-in
            transition-delay 기본값 0*/
        }
        .tr:hover {
            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg);
        }
    </style>
</head>
<body>
    <h3>transition 속성 한꺼번에 표기하기</h3>
    <div class="tr"></div>
</body>
</html>

트랜지션에도 접두사가 들어가는 것과

트랜스폼과는 비슷하면서도 굉장히 다른 느낌이라

잘 알고 있어야겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 (0)	2020.08.02
[HTML+CSS][CSS3와 애니메이션] 05 - 연습문제 (0)	2020.08.01
[HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 (0)	2020.07.29
[HTML+CSS][CSS3와 애니메이션] 01 - 변형 (0)	2020.07.24
[HTML+CSS][다재다능한 CSS3 선택자] 04 - 연습문제 (0)	2020.07.23

IT Information Notebook

[HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션

트랜지션 (transition)

transition-property 속성 : 트랜지션 적용할 속성 지정

transition-duration 속성 : 트랜지션 진행시간 지정

transition-timing-function 속성 : 트랜지션 속도 곡선 지정

transition-delay 속성 : 지연 시간 설정

transition 속성 : 트랜지션 속성 한꺼번에 표기

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션

트랜지션 (transition)

transition-property 속성 : 트랜지션 적용할 속성 지정

transition-duration 속성 : 트랜지션 진행시간 지정

transition-timing-function 속성 : 트랜지션 속도 곡선 지정

transition-delay 속성 : 지연 시간 설정

transition 속성 : 트랜지션 속성 한꺼번에 표기

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바