Keep going
트랜지션과 애니메이션 본문
11-1 변형 알아보기
transform과 변형 함수
웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들어 웹 요소를 x 축으로 50 px, y축으로 100 px 이동하는 클래스 선택자 .photo를 정의하려면 아래와 같이 사용하면 된다.
|
.photo {transform: translate(50px, 100px); }
|
cs |
2차원 변형과 3차원 변형
2차원 변형은 웹 요소를 평면에서 변형한다.
평면에서 변형할 때는 2차원 좌표를 사용하는데, x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다.
3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형한다.
3차원 변형에서 z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아진다.
2차원 변형 함수
| 종류 | 설명 |
| translate(tx,ty) | 지정한 크기만큼 x축, y축으로 이동한다. |
| translate(tx) | 지정한 크기만큼 x축으로 이동한다. |
| translate(ty) | 지정한 크기만큼 y축으로 이동한다. |
| scale(sx, sy) | 지정한 크기만큼 x축과 y축으로 확대, 축소한다. |
| scaleX(sx) | 지정한 크기만큼 x축으로 확대, 축소한다. |
| scaleY(sy) | 지정한 크기만큼 y축으로 확대, 축소한다. |
| rotate(각도) | 지정한 각도만큼 회전한다. |
| skew(ax, ay) | 지정한 각도만큼 x축과 y축으로 왜곡한다. |
| skewX(ax) | 지정한 각도만큼 x축으로 왜곡한다. |
| skewY(ay) | 지정한 각도만큼 y축으로 왜곡한다. |
3차원 변형 함수
2차원 변형 함수에 z축을 추가하면 3차원 변형 함수가 된다.
| 종류 | 설명 |
| translate3d(tx, ty, tz) | 지정한 크기만큼 x축, y축, z축으로 이동한다. |
| translateZ(tz) | 지정한 크기만큼 z축으로 이동한다. |
| scale3d(sx, sy, sz) | 지정한 크기만큼 x축, y축, z축으로 확대, 축소한다. |
| scaleZ(sz) | 지정한 크기만큼 z축으로 확대, 축소한다. |
| rotate(rx, ry, 각도) | 지정한 각도만큼 회전한다. |
| rotate3d(rx, ry, rz, 각도) | 지정한 각도만큼 회전한다. |
| rotateX(각도) | 지정한 각도만큼 x축으로 회전한다. |
| rotateY(각도) | 지정한 각도만큼 y축으로 회전한다. |
| rotateZ(각도) | 지정한 각도만큼 z축으로 회전한다. |
| perspective(길이) | 입체적으로 보일 수 있도록 깊잇값을 지정한다. |
웹 요소를 이동시키는 translate () 함수
translate( ) 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다.
|
#movex:hover {
transform: translateX(50px); /* x축으로(가로) 50px 이동 */
}
#movey:hover {
transform: translateY(20px); /* y축으로(세로) 20px 이동 */
}
#movexy:hover {
transform: translate(10px, 20px); /* x축으로(가로) 10px, y축으로(세로) 20px 이동 */
}
|
cs |
요소를 확대, 축소하는 scale( ) 함수
scale ( ) 함수는 웹 요소를 지정한 크기만큼 확대하거나 축소한다.
괄호 안의 값 (sx, sy, sz)이 1보다 크면 확대되고 1보다 작으면 축소된다.
|
#scalex:hover{
transform: scaleX(2); /* x축으로(가로) 2배 확대 */
}
#scaley:hover{
transform: scaleY(1.5); /* y축으로(세로) 2배 확대 */
}
#scale:hover{
transform: scale(0.7); /* x, y축으로(가로, 세로) 0.7배 확대 */
}
|
cs |
요소를 회전시키는 rotate( ) 함수
2차원 rotate( ) 함수
요소를 회전시키는 rotate( ) 함수는 2차원 회전과 3차원 회전에서 모두 사용할 수 있다.
rotate( ) 함수를 2차원에서 사용할 때는 각도만 지정하면 된다.
rotate( ) 함수에서 지정할 수 있는 각도의 값은 일반적인 각도나 래디안을 사용한다.
회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전한다.
|
#rotate1:hover {
transform: rotate(40deg); /* 시계 방향(오른쪽)으로 40도 회전 */
}
#rotate2:hover {
transform: rotate(-40deg); /* 시계 반대 방향(왼쪽)으로 40도 회전 */
}
|
cs |
3차원 rotate( ) 함수
3차원 rotate( ) 함수는 다음과 같이 x축이나 y축, z축을 기준으로 회전시킨다.
<기본형>
transform : rotate(rx, ry, 각도)
transform : rotate3d(rx, ry, rz, 각도)
transform : rotateX(각도)
transform : rotateY(각도)
transform : rotateZ(각도)
이때 perspective 속성을 함께 사용해서 원근감을 추가해 주면 회전 형태를 입체적으로 표현할 수 있다.
perspective 속성에서 사용하는 값은 0보다 커야 하며, 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지를 픽셀 크기로 나타낸다. 값이 클수록 사용자로부터 멀어진다.
주의할 점은 perspective 속성은 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다는 것이다.
|
.rotatex:hover {
transform: rotateX(50deg); /* x축으로 50도 회전 */
}
#pers {
perspective: 300px; /* 원근감 추가 */
}
</style>
</head>
<body>
<div class="origin">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
<div class="origin" id="pers">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
</body>
|
cs |
|
.origin {
width: 100px;
height: 100px;
margin: 40px;
float: left;
border: 1px solid black;
perspective: 200px; /* 원근감 추가 */
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
transition:all 3s; /* 3초 동안 회전하도록 트랜지션 적용 */
}
#rotatex:hover {
transform: rotateX(55deg); /* x축으로 55도 회전 */
}
#rotatey:hover {
transform: rotateY(55deg); /* y축으로 55도 회전 */
}
#rotatez:hover {
transform: rotateZ(55deg); /* z축으로 55도 회전 */
}
#rotatexyz:hover {
transform: rotate3d(2.5, 1.2, -1.5, 55deg); /* x,y,z축으로 55도 회전 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="rotatex"></div>
</div>
<div class="origin">
<div id="rotatey"></div>
</div>
<div class="origin">
<div id="rotatez"></div>
</div>
<div class="origin">
<div id="rotatexyz"></div>
</div>
</div>
</body>
|
cs |
요소를 비틀어 왜곡하는 skew( )함수
skew( ) 함수는 지정한 각도만큼 요소를 비틀어 왜곡한다.
이때 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있다.
|
#skewx:hover {
transform: skewX(30deg); /* x축 기준으로 30도 비틀기 */
}
#skewy:hover {
transform: skewY(15deg); /* y축 기준으로 15도 비틀기 */
}
#skewxy:hover {
transform: skew(-25deg, -15deg); /* x축 기준으로 -25도, y축 기준으로 -15도 비틀기 */
}
|
cs |
|
<style>
#container{
width: 600px;
margin: 20px auto;
}
h1 {
width: 500px;
height: 80px;
background-color: #222;
color: #fff;
font-weight: bold;
line-height: 80px;
text-align: center;
transform: skewX(15deg); /* x축 기준으로 15도 비틀기 */
}
</style>
|
cs |
11-2 트랜지션 알아보기
트랜지션이란
트랜지션은 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말한다.
|
<style>
.bg-tr{
background-color:skyblue;
transition:all ease 1s;
}
.bg-tr:hover {
background-color:blue;
}
.border-tr {
background-color: orange;
border: 3px solid black;
transition: all linear 1.5s;
}
.border-tr:hover {
border: 3px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="bg-tr"> </div>
<div class="border-tr"></div>
</body>
|
cs |
위 코드는 도형 위로 마우스 포인터를 올리면 색깔이 바뀌고 도형 모두 마우스 포인터를 내리면 원래 형태로 되돌아간다.
이렇게 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 트랜지션이라고 한다.
트랜지션과 속성
| 종류 | 설명 |
| transition-property | 트랜지션의 대상을 지정한다. |
| transition-duration | 트랜지션을 실행할 시간을 지정한다. |
| transition-timing-function | 트랜지션의 실행 형태를 지정한다. |
| transition-delay | 트랜지션의 지연 시간을 지정한다. |
| transition | transition-propery, transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 정한다. |
트랜지션의 대상을 지정하는 transition-property 속성
트랜지션을 만들려면 맨 먼저 transition-property 속성을 사용항 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정해야 한다.
| 종류 | 설명 |
| all | all 값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 된다. 기본값이다. |
| none | 트랜지션을 하는 동안 아무 속성도 바뀌지 않는다. |
| 속성 이름 | 트랜지션 효과를 적용할 속성을 지정한다. 예를 들어 배경색만 바꿀 것 인지, width 값을 바꿀 것인지 원하는 대상만 골라 지정할 수 있다. 속성이 여럿일 경우 쉼표로 구분하여 나열한다. |
트랜지션의 진행 시간을 지정하는 transition - duration 속성
transition-property에서 트랜지션 대상을 지정했다면 다음으로 진행 시간을 지정해야 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있다.
진행 시간은 transition-duration 속성으로 지정할 수 있다.
지정할 수 있는 시간 단위는 초 또는 밀리초 이다.
대상 속성이 여러 개라면 진행 시간도 쉼표로 구분해서 여러 개를 지정할 수 있다.
|
<style>
.box {
margin: 20px auto;
width: 100px;
height: 100px;
background-color: #07f;
border: 1px solid #222;
transition-property: width, height; /* 트랜지션 대상 - 너비, 높이 */
transition-duration: 2s, 1s; /* 트랜지션 시간 - 2초, 1초 */
}
.box:hover {
width: 200px;
height: 120px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
|
cs |
트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성
transition-timing-function 속성을 사용하면 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있다.
속도 곡선은 미리 정해진 키워드나 베지에 곡선을 이용해 표현한다.
| 종류 | 설명 |
| ease | 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝낸다. 기본값이다. |
| linear | 시작부터 끝까지 똑같은 속도로 진행한다. |
| ease-in | 느리게 시작한다. |
| ease-out | 느리게 끝낸다. |
| ease-in-out | 느리게 시작하고 느리게 끝낸다. |
| cubic-bezier(n, n, n, n) | 베지에 함수를 정의해서 사용한다. 이때 n값은 0~1 사이만 사용할 수 있다. |
|
#ex:hover div{
height: 400px;
}
#ex .ease {
transition: 3s ease;
}
#ex .linear{
transition: 3s linear;
}
#ex .ease-in{
transition: 3s ease-in;
}
#ex .ease-out{
transition: 3s ease-out;
}
#ex .ease-in-out{
transition: 3s ease-in-out;
}
</style>
</head>
<body>
<div id="ex">
<div class="ease"> ease </div>
<div class="linear"> linear </div>
<div class="ease-in"> ease-in </div>
<div class="ease-out"> ease-out </div>
<div class="ease-in-out"> ease-in-out </div>
</div>
</body>
|
cs |
트랜지션의 지연 시간을 설정하는 transition-delay 속성
transition-delay 속성은 트랜지션 효과를 언제부터 시작할 것인지 설정한다.
이 속성을 사용하면 지정한 시간만큼 기다렸다가 트랜지션이 시작된다.
사용할 수 있는 값은 초나 밀리초이며 기본값은 0이다.
<기본형>
transition - delay: <시간>
트랜지션의 속성을 한꺼번에 표기하는 transition 속성
트랜지션의 적용 대상이 전체이고 각각의 진행 시간이 같다면 transition 속성으로 한꺼번에 지정하는 것이 편리하다.
속성값을 작성하는 순서는 상관이 없으나, 시간값을 사용하는 속성이 2개 (진행 시간, 지연시간) 이므로 시간값이 2개 있다면 앞에 오는 시간값을 transition-duration 속성으로, 뒤에 오는 값은 transition-delay 속성으로 간주한다.
|
<style>
.box {
margin: 50px auto;
width: 100px;
height: 100px;
background-color: #fb5;
border: 1px solid #222;
transition: 2s ease-in; /* 대상: all, 시간:2초, 함수:ease-in */
}
.box:hover { /* 여기에 있는 속성이 모두 트랜지션 대상 */
width: 200px;
height: 200px;
background-color: #f50;
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
|
cs |
11-3 애니메이션 알아보기
CSS 애니메이션에서 사용하는 속성
CSS3 의 animation 속성을 사용하면 자바 스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다.
animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다.
키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.
| 종류 | 설명 |
| @keyframes | 애니메이션이 바뀌는 지점을 지정한다. |
| animation-delay | 애니메이션의 시작 시간을 지정한다. |
| animation-direction | 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정한다. |
| animation-duration | 애니메이션의 실행 시간을 지정한다. |
| animation-iteration-count | 애니메이션의 반복 횟수를 지정한다. |
| animation-name | @keyframes로 설정해 놓은 중간 상태를 지정한다. |
| animation-timing-function | 키프레임의 전환 형태를 지정한다. |
| animation | animation 속성을 한꺼번에 묶어서 지정한다. |
애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성
애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다.
<기본형>
@keyframes <이름> {
<선택자> { <스타일> }
}
또한 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별해야 한다.
이때 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다.
<기본형>
animation-name : <키프레임 이름> | none
@keyframes 속성에서 아용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킨다.
예를 들어 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100 %로 놓고 50% 위치에 키프레임을 추가하면 된다.
시작과 끝 위치를 사용하려면 0%, 100%와 같은 값 대신 from과 to 라는 키워드를 사용해도 된다.
애니메이션의 실행 시간을 지정하는 animation-duration 속성
animation-duration 속성은 애니메이션을 얼마 동안 재생할 것인지 설정한다.
<기본형>
animation-duration : <시간>
animation-duration 속성에서 아용할 수 있는 값은 초나 밀리초와 같은 시간 단위이다.
기본값은 0이므로 animation-duration 속성값을 정하지 않으면 애니메이션은 실행되지 않는다.
|
#box1 {
background-color: #4cff00;
border: 1px solid transparent;
animation-name: shape; /* 애니메이션 지정 */
animation-duration: 3s; /* 애니메이션 실행 시간 */
}
#box2 {
background-color: #8f06b0;
border: 1px solid transparent;
animation-name: rotate; /* 애니메이션 지정 */
animation-duration: 3s; /* 애니메이션 실행 시간 */
}
@keyframes shape { /* shape 애니메이션 정의 */
from {
border: 1px solid transparent; /* 1px짜리 투명한 테두리 */
}
to {
border: 1px solid #000; /* 검정색 테두리 */
border-radius: 50%; /* 테두리를 둥글게 */
}
}
@keyframes rotate { /* rotate 애니메이션 정의 */
from {
transform:rotate(0deg) /* 시작은 0도에서 */
}
to {
transform: rotate(45deg); /* 45도까지 회전 */
}
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
</body>
|
cs |
애니메이션의 방향을 지정하는 animation-direction 속성
애니메이션은 한 번 실행하고 나면 처음 상태로 되돌아간다.
이때 animation-direction 속성을 사용하면 원래 상태로 돌아가거나 애니메이션을 반대 방향으로 한번 더 실행하도록 할 수도 있다.
| 종류 | 설명 |
| normal | 애니메이션을 끝까지 실행하면 원래 위치로 돌아간다. 기본값이다. |
| alternate | 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행한다. |
반복 횟수를 지정하는 animation-iteration-count 속성
상황에 따라 애니메이션을 반복해서 보여 줘야 할 때는 animation-iteration-count 속성을 사용해 반복 횟수를 정한다.
| 종류 | 설명 |
| 숫자 | 애니메이션의 반복 횟수를 정한다. |
| infinite | 애니메이션을 무한 반복한다. |
애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성
트랜지션과 마찬가지로 animation에서도 에니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있다.
animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
|
#box1 {
background-color: #4cff00;
border: 1px solid transparent;
animation-name: shape; /* 애니메이션 지정 */ ;
animation-duration: 3s; /* 애니메이션 실행 시간 */
animation-iteration-count: infinite; /* 애니메이션 무한 반복 */
}
#box2 {
background-color: #8f06b0;
border: 1px solid transparent;
animation-name: rotate; /* 애니메이션 지정 */
animation-duration: 3s; /* 애니메이션 실행 시간 */
animation-iteration-count: infinite; /* 애니메이션 무한 반복 */
}
@keyframes shape { /* shape 애니메이션 정의 */
from {
border: 1px solid transparent; /* 1px짜리 투명한 테두리 */
}
to {
border: 1px solid #000; /* 검정색 테두리 */
border-radius: 50%; /* 테두리를 둥글게 */
}
}
@keyframes rotate { /* rotate 애니메이션 정의 */
from {
transform:rotate(0deg) /* 시작은 0도에서 */
}
to {
transform: rotate(45deg); /* 45도까지 회전 */
}
}
</style>
|
cs |
애니메이션의 속성을 한꺼번에 표기하는 animation 속성
위의 animation 관련 속성을 한 줄씩 따로따로 작성하지 않고 한꺼번에 표기하는 방법이다.
주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다.
|
.box {
animation-name : moving;
animation-duration : 3s;
animation-timing-function : ease-in;
animation-direction : alternate;
animation-iteration-count : infinite;
}
|
cs |
|
.box {
animation : mooving 3s alternate infinite ease-in;
}
|
cs |
애니메이션 2개를 한꺼번에 지정하기
aniation 속성을 사용하며 간단하게 표현할 수 있으므로 쉼표로 구분하여 둘 이상의 애니메이션을 실행할 수 있다.
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 60px auto;
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
}
@keyframes rotate { /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */
from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes background { /* 배경색을 빨강 -> 초록 -> 파랑 순서로 바꾸기 */
from { background-color: red; }
50% { background-color: green }
to { background-color: blue; }
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
|
cs |
출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]
'Web Project > CSS' 카테고리의 다른 글
| CSS 고급 선택자 (0) | 2021.03.01 |
|---|---|
| 이미지와 그러데이션 효과로 배경 꾸미기 (0) | 2021.02.26 |
| 레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.02.24 |
| 텍스트를 표현하는 다양한 스타일 (0) | 2021.02.20 |
| CSS의 기본 (0) | 2021.02.19 |
