animation left / transform 성능

📺 left / transform 차이

기획자나 디자이너 요구사항에 따라 애니매이션을 넣어야 하는 경우가 있다. 이번에 애니메이션이 버벅인다는 말이 나왔고, 애니메이션에 속도 저하시키는 요소가 left였다는 것을 발견하였다.

간단하게 left가 0 => 100px 하는 모습을 만들어보았다.

🕹️ left를 이용한 애니메이션

위와 같이 만들었을때의 단점이 존재하였다. 단점은 애니메이션을 infinite(무한반복) 시켰을때 리렌더링이 되고 있었다.

간단한 left를 이용한 css 코드이다.

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>Animation1</title>
    <link rel="stylesheet" href="./src/styles/animation1.css">
</head>

<body>
    <div class="container">
        <div class="circle left-animation">

        </div>
    </div>


</body>

</html>

css

.container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100px;
}

.circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: aqua;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}


.left-animation {
    animation-delay: 250ms;
    animation-direction: normal;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: leftanimation;
}


@keyframes leftanimation {
    from {
        left: 0;
    }

    to {
        left: 100px;
    }
}

🪙 transform을 이용한 애니메이션

이번에는 transform을 이용하여 애니매이션을 만들어보았다.

아래는 transform을 이용한 html,css 코드이다

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>Animation1</title>
    <link rel="stylesheet" href="./src/styles/animation1.css">
</head>

<body>

    <div class="container">
        <div class="circle2 transform-animation">

        </div>
    </div>


</body>

</html>

css

.container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100px;
}

.circle2 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.transform-animation {
    animation-delay: 250ms;
    animation-direction: normal;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: transformanimation;
}

@keyframes transformanimation {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }
}

⏱️ 렌더링 과정을 통한 css 성능 알기

렌더링 과정은 "파싱 = > 레이아웃 => 페인트 => Composite" 이 일어난다. 여기서 애니매이션에서 "left" 를 사용한다면

"레이아웃 => 페인트 => Composite"이 반복해서 일어난다. 만약 애니매이션을 무한반복(infinite) 시킬 경우에는 "레이아웃 => 페인트 => Composite" 계속해서 무한반복 과정이 일어나며, 브라우저 성능이 저하될수 있다.

그러므로 가급적이면 애니매이션에서는 "left,top,width,height 등등" 같은 속성 보다는 "transform" 속성을 이용하는게 낫다

'css' 카테고리의 다른 글

📫 css animation 성능 비교 (5)	2023.06.22

one step

animation left / transform 성능

📺 left / transform 차이

🕹️ left를 이용한 애니메이션

🪙 transform을 이용한 애니메이션

⏱️ 렌더링 과정을 통한 css 성능 알기

'css' 카테고리의 다른 글

댓글

티스토리툴바

animation left / transform 성능

📺 left / transform 차이

🕹️ left를 이용한 애니메이션

🪙 transform을 이용한 애니메이션

⏱️ 렌더링 과정을 통한 css 성능 알기

'css' 카테고리의 다른 글

관련글

댓글

티스토리툴바