IT/CSS

CSS - 4일차 transition

쭈루짱나눈짱 2023. 5. 17. 14:35
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>트랜지션</title>
    <style>
        /*
            트랜지션 - 스타일 속성을 변경시키는 것(배경색 바꾸거나 도형 테두리를 사각형 -> 원형으로 바꾸는 것)

            익스플로러 10이상, 엣지, 대부분의 최신 브라우저에서 지원

            속성
            transition-property - 트랜지션의 대상을 지정
            transition-duration - 트랜지션을 실행할 시간을 지정
            transition-timing-function - 트랜지션의 실행 형태를 지정
            transition-delay - 트랜지션의 지연 시간을 지정
            transition - 위 속성들을 한꺼번에 지정
       
            transition-property
            - 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정
            기본형 - transition-property : all | none | <속성 이름>
            속성값
                all - 기본값. 모든 속성이 트랜지션 대상이 됨.
                none - 트랜지션을 하는 동안 아무 속성도 바뀌지 않음
                속성 이름 - 트랜지션 효과를 적용할 속성(배경색, width값 등)
                            을 지정 속성이 여러개일 경우 쉼표(,)로 구분  
                ex) transition-property: all; // 모든 속성에 적용
                ex) transition-property: background-color; // 배경색에 적용
                ex) transition-property: width, height; // 너비와 높이에 적용


                transition-duration
                - 트랜지션 진행 시간 설정
                기본형 - transition-duration: >시간>
                시간 단위는 초 또는 밀리초
        */
        .box {
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background-color: #07f;
            border: 1px solid #222;
            transition-property: width, height;
            transition-duration: 2s, 1s;
        }

        .box:hover {
            width: 200px;
            height: 120px;
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>트랜지션</title>
    <style>
        /*
            transition-timing-function
            - 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있음
            기본형 - transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

            속성값
                ease - 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냄.
                linear - 시작부터 끝까지 똑같은 속도로 진행
                ease-in - 느리게 시작
                ease-out - 느리게 끝냄
                ease-in-out - 느리게 시작하고 느리게 끝냄
                cubic-bezier(n, n, n, n) - 배지에 함수를 정의해서 사용
                                            n의 값은 0~1 사이 값만 사용가능

            transition-delay
            - 트랜지션 효과를 언제부터 시작할 것인지 설정
            - 사용하는 값은 초(s)나 밀리초(ms), 기본값은 0
            기본형 - transition-dely: <시간>

            transition
            - 트랜지션 속성을 한꺼번에 지정
            - 속성값 순서는 상관없으나 시간값의 경우
            앞에 오는 시간값은 transition-duration 속성으로
            뒤에 오는 transition-delay 속성으로 간주함
            기본형 - transition: <transition-property값> | <transition-duration값>
                                | <transition-timing-function값> | <transition-delay값>

        */
        .box {
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background-color: #07f;
            border: 1px solid #222;
            transition-property: all;
            transition-delay: 0;
            transition: 2s ease-in;
        }

        .box:hover {
            width: 200px;
            height: 200px;
            background-color: #f50;
            transform: rotate(270deg);
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

 

반응형