HTML,CSS (transition, transform, animation)

신윤철·2022년 2월 23일
0

HTML,CSS

목록 보기
5/6
post-thumbnail

이전에는 페이지에 효과를 주기위해선 자바스크립트를 사용해야 했지만 CSS에서도 이를 가능하게 하는 방법이 생겼습니다.

이번에는 이 방법들에 대해 알아보겠습니다.

transition

transition : 어떤 조건일때 특정 상태에서 다른 상태로 "변화" 시키는 방법을 컨트롤합니다.

기본 구조는 transition : "변화시킬 속성" "변화할 시간" "변환방식"; 입니다.

예제를 통해 알아보겠습니다.

<!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">
    <style>
        a{
            background-color: aqua;
            color: teal;
            font-size: 50px;
            border-radius: 10px;
            text-decoration: none;
        }

        a:hover{
            background-color: teal;
            color: aqua;
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <a href="#">
        Hover Button
    </a>
</body>
</html>

이처럼 transition을 주지 않을 경우, hover 조건일때 a{} 상태에서 a:hover{} 상태로 효과 없이 변화하게 됩니다.

이제 transition을 적용한 경우를 살펴보겠습니다.

<style>
  a{
    background-color: aqua;
    color: teal;
    font-size: 50px;
    border-radius: 10px;
    text-decoration: none;
  
    transition: background-color 3s ease-in-out, color 3s ease-in-out;
  }

  a:hover{
    background-color: teal;
    color: aqua;
  }
</style>

이처럼 transition을 사용하면 변화를 컨트롤할 수 있습니다.

transition의 몇가지 특별한 사용방법에 대해 알아보겠습니다.

  • transition : all "변화할 시간" "변환방식";을 사용하여 변화되는 모든 속성을 선택할 수 있습니다.

  • transition : "변화시킬 속성" "변화할 시간" "변환방식", "변화시킬 속성" "변화할 시간" "변환방식", ... 이처럼 쉼표를 사용해 계속해서 이어 붙일 수 있습니다.

  • transition은 state selector이 없는 곳에서 사용되어야 합니다.
    (예를 들면 .a:hover{}이 아닌 .a{}에 정의)

ease-in-out같은 "변환방법"은 이미 정의된 방법을 사용할 수 있고, 사용자가 직접 비율을 지정하여 사용할 수 있습니다.

이 사이트에서 여러 변환 방법과 예제를 확인할 수 있습니다.

transform

transform은 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">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;
        }
        img:first-child{
            transform: translateX(-100px);
        }
        img:nth-child(2){
            transform: rotate(0.5turn);
        }
        img:nth-child(3){
            transform: scaleY(2);
        }
        img:nth-child(4){
            transform: skew(30deg, 20deg);
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
</body>
</html>

기본 이미지를 translate로 위치를 옮기거나
rotate로 돌리거나, scale로 늘리고 줄이거나, skew로 x, y각도로 기울일 수 있습니다.


그런데 그냥 transform만 사용하면 약간 밋밋합니다.
transition를 곁들이면 더 이쁜 효과를 만들 수 있을 것 같습니다.

<!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">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;

            transition: transform 3s ease-in-out;
        }

        img:hover{
            transform: rotateX(0.5turn) translateX(400px);
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
</body>
</html>

tranform과 transition을 같이 사용하니 그럴듯한 효과가 만들어졌습니다.
(rotateX가 회전을 저렇게 하는진 상상도 못했는데 과정을 보니 새롭게 느껴지네요 ..)

transform 효과는 매우 많은 종류가 있는데
여기서 또는 여기서확인할 수 있습니다.

animation

지금까지 배운것들이 다 animation같은데 또 따로 animation이라는 개념이 나왔습니다.

차이가 무엇일까요?

transition으로 만든 효과는 항상 특정 조건(:hover, :active...)일때만 실행됐습니다.

이번에 배워볼 animation은 이를 보완하여 우리가 원하는 만큼, 원할때 실행할 수 있도록 도와줍니다.

animation은 keyframes를 사용하여 만드는데 기본 구조는 아래와 같습니다.

@keyframes animation-name{
  from {
    설정 효과;
  }
  to {
    설정 효과;
  }
#또는 0% {} 25% {} 50% {} 75% {} 100% {} 등도 있습니다. 
}

.class{
  animation : animation-name "설정 시간" "변환 효과" "변환 기간"
}

이제 실제로 animation을 사용한 예제를 살펴보겠습니다.

<!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">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;

            animation : guImg 3s ease-in-out infinite;
        }

        @keyframes guImg {
            0%{
                transform : rotateY(0);
            }
            25% {
                transform: rotateY(0.25turn) scale(1.5);
                border-radius: 25%;
            }
            50% {
                transform: rotateY(0.5turn) scale(2);
                border-radius: 5%;
            }
            75% {
                transform: rotateY(0.25turn) scale(1.5);
                border-radius: 25%;
            }
            100% {
                transform: rotateY(0);
            }
        }
    </style>
    
    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
</body>
</html>

state selector을 사용하지 않아도 animation이 잘 작동하는 것을 확인할 수 있습니다.

이처럼 animation을 사용하는 이유와 예제도 살펴봤습니다.

animation의 여러 방식을 소개한 사이트인데 매우 유용하므로 필요하면 사용하시면 됩니다!

profile
기본을 탄탄하게🌳

1개의 댓글

comment-user-thumbnail
2022년 3월 4일

아무래도 js보다 css로 애니메이션을 만드는게 최적화에 좋다보니까 알아두면 많이 도움이 될 것 같네요 :) 감사합니다!

답글 달기