CSS3에서 움직임을 구현할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉜다.
웹 기초6에서는 CSS3 변형과 애니메이션에 대하여 기본적인 몇 가지만 간단하게 학습하려고 한다.
<transform>
:2차원 변환이 가능한 태그
속성)
1. transform: translate(x, y); - 특정 크기만큼 이동 (좌표 변경)
2. transform: scale(x, y); - 입력한 크기만큼 확대 및 축소 (숫자를 1보다 작게 쓰면 축소됨)
3. transform: skew(x, y); - 입력한 각도만큼 비틂 => 각도 단위로 입력(deg)
위의 속성들을 한 줄로 작성가능
transform: rotate(60deg) scale(1.2 ) skew(10deg,20deg);
transform은 새롭게 나온 함수이므로, 브라우저마다 특정한 접두사가 붙어야 실행가능하다.
예)
-webkit-transform:translate(100px, 200px); =>크롬, 사파리
-moz-transform:translate(100px, 200px); =>파이어폭스
-ms-transform:translate(100px, 200px); =>익스플로러 9.0
-o-webkit-transform:translate(100px, 200px); =>오페라
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Transform</title>
<style>
.transform {
width: 100px;
height: 100px;
background-color: red;
transform:rotate(45deg);
transform:scale(2,3);
transform:translate(100px, 200px);
transform:skew(10deg, 20deg);
margin:200px 0 0 200px;
}
</style>
</head>
<body>
<div class="transform"></div>
</body>
</html>
<transition>
: 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용됨
속성)
1. transition-property:width - 효과를 적용하고자 하는 css 속성
2. transition-duration: - 효과가 나타나는데 걸리는 시간(얼마동안 효과를 발생시킬건지)
3. transition-timing-function: -효과의 속도/ linear(일정하게)
4. transition-delay: -특정 조건 하에서 효과를 발동 (얼마나 있다가 효과를 발생시킬건지)
5. .transition:hover{width:300px;} - hover은 css에서 미리 만들어 놓은 가상 선택자로, '마우스를 올렸을 때' 라는 조건
transition도 transform처럼 위의 속성들을 한 줄에 나열해서 써서 적용이 가능하다.
단, transition에는 시간이 총 2개가 나오는데 (duration, delay)
앞에 나오는 시간이 항상 duration이고, 뒤에 나오는 시간은 항상 delay이다.(숫자가 하나일 경우 무조건 duration)
transition: width 2s linear 1s;
실습 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Transtion</title>
<style>
.transition {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s linear 1s;
}
.transition:hover{width:300px;}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
<animation>
: 특정한 조건 없이 어떠한 변화를 주고 싶을 때 사용<==>transition은 특정한 조건 필요
속성)
1. animation-name: changeWidth => 임의로 작성 가능 (그냥 이름을 정하는 것)
=> 태그를 키 프레임에 연결하여 애니메이션을 동작시키는 역할
@keyfames 애니메이션-이름{
from{ }
to{ }
}
이렇게 @keyframes에 연동하여 사용
2. animation-delay
3. animation-direction: - alternate/ normal/ reverse
normal: 시작 -> 끝
reverse: 끝 -> 시작
alternate: 시작 -> 끝 -> 시작 (왕복)
4. animation-duration
5. animation-timing-function: -효과의 속도/ linear(일정하게)
6. animation- iteratoin-count: - 반복 횟수
animation도 위의 속성들을 한 줄에 나열해서 써서 적용이 가능하다.
animation: rotation(임의로 작성한 이름) 1500ms linear infinite alternate;
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Animation</title>
<style>
.animation {
animation-name:changeWidth;
width: 300px;
height: 300px;
background-color: yellow;
animation-duration:3s;
animation-timing-function: linear;
animation-delay:1s;
animation-iteration-count:6;
animation-direction:alternate;
}
@keyframes changeWidth{
from{width:300px;}
to{width:600px;}
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
transform과 animation을 합쳐서도 응용 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Transform, Animation</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
animation: rotation 1500ms linear infinite alternate;
}
@keyframes rotation {
from {
transform: rotate(-10deg);
}
to {
transform: rotate(10deg);
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>'웹 프론트엔드' 카테고리의 다른 글
| 자바스크립트2 - 조건문 & 반복문 (1) | 2024.01.12 |
|---|---|
| 자바스크립트1 - 개념과 기초 문법(변수 & 함수) (0) | 2024.01.09 |
| CSS2 - CSS 스타일 속성 (0) | 2022.06.28 |
| CSS1 - CSS 선택자 (0) | 2022.06.27 |
| 웹 기초2 - HTML 기본 태그 (0) | 2022.06.07 |