[CSS] css 개념 | transition

무콩이 2023. 5. 16. 23:21

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <title>CSS Transtion</title>

    <style>
        .transition {
            width: 100px;
            height: 100px;
            background-color: red;

            transition-property: width;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }

// 마우스를 올리면 1초 후에 width값이 300px로 2초동안, 속도 일정하게 변하는 애니메이션 코드
        .transition:hover {
            width: 300px;
        }
    </style>

</head>

<body>

    <div class="transition"></div>

</body>

</html>

박스에 마우스를 올리면 1s후에 width가 증가하고 마우스를 떼면 width가 다시 줄어든다.

transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;

이 코드는 한줄로 작성 가능 ( -속성 의 순서를 맞춰서 적어주어야한다.)

transition : width 2s linear 1s;

첫번째 숫자는 duration이고 두번째 숫자는 delay이다.

만약 숫자가 하나만 적혀있다면 무조건 duration이다.

저작자표시 (새창열림)