[CSS] 그라데이션 효과, 애니메이션 효과

무콩이 2023. 3. 29. 12:51

그라데이션

⊙ 그라데이션 주기

background  : linear-gradient(to right, black, transparent);

=> 검은색에서 투명색으로 그라데이션 , 이때 방향은 오른쪽으로 점점 투명해짐
즉, 검은색으로 시작해서 오른쪽으로 점점 투명색이 되도록

⭐ background : linear-gradient(to 방향, 시작색, 끝색);

그라데이션을 원하는 위치에 두려면?

위의 그라데이션을 원하는 위치로 옮겨보자
position 사용하기

position : absolute;
top : ~~;
left : ~~;
width : ~~;
height : ~~;

position의 absolute로 top, right, left의 위치 조정과 width, heigh로 크기 조정까지 가능하다

애니메이션

⊙ 애니메이션 만들기

@keyframes 이름 {
	from {
    	left : -100px;
        opacity : 0;
    }
    to {
    	left : 400px;
        opacity : 1;
    }
}

애니메이션 이름 : 이름
left -100px 위치에서 opacity 0으로 시작해서
left 400px 위치에 opacity 1로 도착

+ (opacity는 글씨의 투명도를 조절)

⊙ 애니메이션 적용

태그 {
	animation : 이름 2s ease-out;
}

원하는 태그에 keyframes로 만든 animation 추가해주기

animation : 이름; 이것만 해도 적용됨
2s : 2초동안 애니메이션 실행
ease-out 효과 주기

애니메이션 예시

<!DOCTYPE html>
<html>

<head>

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

    <style>
        .animation {
            width: 300px;
            height: 300px;
            background-color: yellow;

            animation-name: changeWidth; /*애니메이션 이름*/
            animation-duration: 3s;/*애니메이션 진행시간*/
            animation-timing-function: linear; /*속도*/
            animation-delay: 1s; /*1s후 시작*/
            animation-iteration-count: 6; /*애니메이션 반복 횟수 ,무한: infinite*/
            animation-direction: alternate; /* 방향 */
        }
            @keyframes changeWidth {
                from {
                    width: 300px;
                }

                to {
                    width: 600px;
                }
            }

    </style>

</head>

<body>

    <div class="animation"></div>

</body>

</html>

1초 후에 박스가 300px에서 600px로 3초동안 늘어났다 줄어들었다를 반복한다.

from-to 넘어갈때 count +1 to-from 될 때 count +1 --> from-to 왕복 3번 반복하게됨 ( animation-iteration-count : 6; )

한줄 작성 가능

animation: changeWidth 3s linear 1s 6 alternate;

저작자표시 (새창열림)