728x90

[ 코딩 자율학습 ]

HTML+CSS+자바스크립트

6.7 ) 애니메이션 속성으로 전환 효과 제어하기

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

animation-name: beChange;

animation-duration: 2s;

}

@keyframes beChange {

0% {

background-color: aqua;

}

100% {

background-color: beige;

}

</style>

</head>

<body>

</body>

</html>

애니메이션 속성:

전환효과 속성과 달리

키프레임을 정의해서 실행

< animation-name 속성 >

: 특정 요소 적용할

키 프레임 이름 지정

< animation-duration 속성 >

: 애니메이션을 지속할 시간을 설정

< animation-delay 속성 >

: 애니메이션 실행을 지연

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

animation-name: beChange;

animation-duration: 2s;

animation-delay: 2s;

animation-fill-mode: forwards;

}

@keyframes beChange {

0% {

background-color: aqua;

}

100% {

background-color: beige;

}

</style>

</head>

<body>

</body>

</html>

< animation-fill-mode 속성 >

: 애니메이션 끝나도

종료된 시점의 상태유지할 떄 사용

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

animation-name: beChange;

animation-duration: 2s;

animation-delay: 2s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

}

@keyframes beChange {

0% {

background-color: aqua;

}

100% {

background-color: beige;

}

</style>

</head>

<body>

</body>

</html>

< animation-iterator-count 속성 >

: 애니메이션 실행 횟수 조절

(무한반복 예시)

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

animation-name: beChange;

animation-duration: 2s;

animation-delay: 2s;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

animation-play-state: running;

}

.box:hover {

animation-play-state: paused;

}

@keyframes beChange {

0% {

background-color: aqua;

}

100% {

background-color: beige;

}

</style>

</head>

<body>

</body>

</html>

< animation-play-state 속성 >

: 애니메이션의 재생 상태 지정

: 일시정지 / 실행(기본값)

: hover을 같이 사용해서

박스에 마우스를 올리면

애니메이션 정지

< 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" />
    <title>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: beChange 2s 3 ease-in;
      }

      @keyframes beChange {
        0% {
          background-color: aqua;
        }
        100% {
          background-color: beige;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

- animation 전환 효과 예제 -

6.8) 변형 효과 적용하기

< 변형효과 >

: 요소 자체를 변하게 할 떄 사용

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

transform: translate(100px, 100px);

}

</style>

</head>

<body>

</body>

</html>

< transform() 함수 >

: 현재 위치에서 x축과 y축 만큼 이동

: translate() 함수는

x축과 y축 두방향으로 동시에 이동한다

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

transform: translateX(-100px);

}

</style>

</head>

<body>

</body>

</html>

현재 있던 위치에서

x축으로 100px 이동

(음수도 가능)

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

transform: translateY(100px);

}

</style>

</head>

<body>

</body>

</html>

현재 있던 위치에서

y축으로 100px 이동

(음수도 가능)

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

}

.box:hover {

transform: scaleX(2);

}

</style>

</head>

<body>

</body>

</html>

< scaleX() 함수 >

: x축 방향으로 확대하거나

축소할 수 있음

확대시,

현재 요소를 기준으로

좌우 균등하게 늘어남

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: scaleY(2);

}

</style>

</head>

<body>

</body>

</html>

< scaleY() 함수 >

: y축 방향으로 확대하거나

축소할 수 있음

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: scale(2);

}

</style>

</head>

<body>

</body>

</html>

< scale() 함수 >

: x축 , y축을 동시에 확대하거나

축소할 수 있음

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: scale(2,5);

}

</style>

</head>

<body>

</body>

</html>

- scale() 함수 예시 -

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: skewX(30deg);

}

</style>

</head>

<body>

</body>

</html>

< skew() 함수 >

: 요소 기울기

: deg를 통해 기울고 싶은

각도를 지정해 줌

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: skewX(-30deg);

}

</style>

</head>

<body>

</body>

</html>

음수(-)를 같이 사용하면

반대로 기울어짐

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: skew(-30deg, -50deg);

}

</style>

</head>

<body>

</body>

</html>

- skew() 함수 예시 -

: x축과 y축 동시에 비틀기

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: rotateX(90deg);

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: rotate(30deg);

}

</style>

</head>

<body>

</body>

</html>

< rotate() 함수 >

: 요소 회전

양수 - 오른쪽

음수 - 왼쪽 회전

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

margin: 100px;

}

.box:hover {

transform: rotate(30deg);

transform-origin: bottom right;

}

</style>

</head>

<body>

</body>

</html>

< transform-origin() 함수 >

: 기준점 바꿔 변형 효과 다르게 적용

(예시에서는

아래 오른쪽을 기준으로

핀 박힌 것처럼 회전

- 양수니까 오른쪽으로 회전함)

<!DOCTYPE html>

<head>

<title>애니메이션 속성으로 전환효과 제어하기</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

</body>

</html>

- 요소를 정중앙에 위치시키기 -

: transform 속성을 사용해서

기준점도 딱 중앙에 오게할 수 있음

6.9) 웹 폰트와 아이콘 폰트 사용하기

<!DOCTYPE html>

<head>

<style>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

</style>

</head>

<body>

<p>

import는 항상 최상단에 위치해서 적용시켜야 한다.<br />

import 외의 또 다른 방법은 link를 복사해서 붙여넣기하는 방식이 있다 <br />

Almost before we knew it, we had left the ground.

</p>

</body>

</html>

1. 구글 폰트 사용

2. Font Awesome

Material Icon 사용

728x90

저작자표시 비영리 변경금지

'> 학습단 > 코딩 자율학습단 2기' 카테고리의 다른 글

[ HTML + CSS + 자바스크립트] 8.1 ~ 9.2 (0)	2023.04.02
[ HTML + CSS + 자바스크립트] 7.1 ~ 7.3 (0)	2023.04.02
[ HTML + CSS + 자바스크립트] 6.5 ~ 6.6 (0)	2023.04.02
[ HTML + CSS + 자바스크립트] 6.3 ~ 6.4 (0)	2023.04.02
[ HTML + CSS + 자바스크립트] 6.2 (0)	2023.04.01