트랜지션과 애니메이션(7일차)
7일동안 09:00~18:00
css, html을 적용하는 것에 대해 배웠으며, css 우선순위와 정렬같은 것이 적용되고 안되고 파악하는 것이 쉽지만은 않았다.
이전 1~6일차는 주말을 이용해서 차근차근 다시 정리하면서 복습해볼 것이다.
트랜지션과 애니메이션 13
요소의 속성값이 변화하면 효과가 바로 나타나는데, 트랜지션과 애니메이션을 사용하면 일정 시간(duration)에 걸쳐 나타나게 할 수 있다.
변형(transform)
2차원 변형, 3차원 변형이 있으며 가상 클래스와 함께 사용하는 것이 일반적이다.
2차원 변형
웹 요소를 평면으로 이동 수평(x) 또는 수직(y) 방향으로 이동하거나 왜곡
CSS에서 (0, 0) 좌표는 왼쪽 상단
3차원 변형
웹 요소를 공간으로 이동 수평(x) 또는 수직(y) 방향에 깊이(z) 방향으로 이동하거나 왜곡
translate() 함수
웹 요소를 지정된 크기의 x축이나 y축 또는 z축 방향으로 이동
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 200px;
height: 200px;
}
.box{
border: 1px solid #000;
float: left;
margin: 10px;
}
.inner{
background-color: salmon;
}
#movex:hover {transform: translateX(50px);}
#movey:hover {transform: translatey(20px);}
#movexy:hover {transform: translate(30px, 30px);}
</style>
</head>
<body>
<div class="box">
<div id="movex" class="inner"></div>
</div>
<div class="box">
<div id="movey" class="inner"></div>
</div>
<div class="box">
<div id="movexy" class="inner"></div>
</div>
</body>
</html>
세 번째 박스에 마우스를 올리면 위의 사진처럼 x, y축 모두 움직이는 것을 확인할 수 있다.
scale() 함수
웹 요소를 지정한 크기만큼 확대하거나 축소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 200px;
height: 200px;
}
.box{
border: 1px solid #000;
float: left;
margin: 10px;
}
.inner{
background-color: salmon;
}
#movex:hover {transform: scaleX(2);}
#movey:hover {transform: scaley(1.5);}
#movexy:hover {transform: scale(0.7);}
</style>
</head>
<body>
<div class="box">
<div id="movex" class="inner"></div>
</div>
<div class="box">
<div id="movey" class="inner"></div>
</div>
<div class="box">
<div id="movexy" class="inner"></div>
</div>
</body>
</html>
세 번째 박스에 마우스를 올리면 위의 사진처럼 축소되는 것을 확인할 수 있다.
ratate() 함수
2차원 회전에 사용되는 경우에는 각도만 지정한다.
양수일 때 시계 방향으로 회전하고 음수일 때 반시계 방향으로 회전한다.
각도는 deg나 rad를 일반적으로 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
padding: 40px;
border: 1px solid #000;
float: left;
margin: 10px;
}
#rotate_left:hover {transform:rotate(-40deg);}
#rotate_right:hover {transform:rotate(40deg);}
</style>
</head>
<body>
<div>
<img src="./images/tree.jpg" id="rotate_left">
</div>
<div>
<img src="./images/tree.jpg" id="rotate_right">
</div>
</body>
</html>
두 번째 박스에 마우스를 올리면 위의 사진처럼 시계 방향으로 회전한다.
3차원 회전에 사용되는 경우 x축, y축, z축을 기준으로 회전시키며 perspective 속성을 함께 정의한다.
perspective를 정의할 때는 변형하려는 요소가 아니라 변형하는 요소의 부모에 정의해야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
padding: 40px;
border: 1px solid #000;
float: left;
margin: 10px;
perspective: 100px;
}
#rotate3d_x:hover {transform:rotateX(-40deg);}
#rotate3d_y:hover {transform:rotateY(40deg);}
#rotate3d_z:hover {transform: rotateZ(40deg);}
</style>
</head>
<body>
<div>
<img src="./images/tree.jpg" id="rotate3d_x">
</div>
<div>
<img src="./images/tree.jpg" id="rotate3d_y">
</div>
<div>
<img src="./images/tree.jpg" id="rotate3d_z">
</div>
</body>
</html>
두 번째 박스에 마우스를 올리면 위의 사진처럼 z축까지 적용되어 회전하게 된다.
트랜지션(transition)
웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 시간에 따라 변하는 것이다.
트랜지션은 CSS의 속성으로 정의하며 가상요소를 활용하여 최종 상태를 정의한다.
transition-property: all | none | <속성 이름>
어떤 속성에 트랜지션을 적용할 것인지 대상을 지정한다.
transition-duration: <시간>
속성이 자연스럽게 바뀌는 애니메이션 효과를 위해 진행 시간을 지정한다.
transition-delay: <시간>
트랜지션 효과를 언제 시작할지 설정한다.
지정한 시간만큼 대기한 후 트랜지션이 시작된다.
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n,n, n) ;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
display: inline-block;
color: white;
background-color: blue;
font-size: x-small;
width: 100px;
height: 100px;
transition-property: height;
transition-duration: 2s;
text-align: center;
}
div:hover{
width: 100px;
height: 300px;
}
#ease { transition-timing-function: ease;}
#linear { transition-timing-function: linear;}
#ease-in { transition-timing-function: ease-in;}
#ease-out { transition-timing-function: ease-out;}
#ease-in-out { transition-timing-function: ease-in-out;}
#cubic-bezier { transition-timing-function: cubic-bezier(1, 2, 5, 10);}
</style>
</head>
<body>
<div id="ease">ease</div>
<div id="linear">linear</div>
<div id="ease-in">ease-in</div>
<div id="ease-out">ease-out</div>
<div id="ease-in-out">ease-in-out</div>
<div id="cubic-bezier">cubic-bezier</div>
</body>
</html>
위의 코드의 결과는 스타일 속성이 시간에 따라 변하는 정도가 다르기 때문에 직접 코드를 작성한 후 눈으로 확인하는 것이 더 크게 와닿을 것이다.
위의 트랜지션을 응용하면
마우스를 사진 위에 올릴 시 해당 상품에 대한 정보가 상품 위에 올라오게 하였다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container ul { list-style-type: none;}
#container h1 { text-align: center;}
#container li {
display: inline-block;
width: 300px;
}
/*
#container li{
display: inline-block;
width: 300px;
position: relative;
overflow: hidden;
}
.prod-list .caption{
color: white;
position: absolute;
top: 200px;
width: 300px;
height: 180px;
padding-top: 20px;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
z-index: 10;
}
.prod-list li:hover .caption {
opacity: 1;
transform: translateY(-200px);
}
*/
</style>
</head>
<body>
<div id="container">
<h1>신상품 목록</h1>
<ul class="prod-list">
<li>
<img src="./images/prod1.jpg">
<div class="caption">
<h2>상품 1</h2>
<p>상품 1 설명 텍스트</p>
<p>가격: 12,345원</p>
</div>
</li>
<li>
<img src="./images/prod2.jpg">
<div class="caption">
<h2>상품 2</h2>
<p>상품 2 설명 텍스트</p>
<p>가격: 12,345원</p>
</div>
</li>
<li>
<img src="./images/prod3.jpg">
<div class="caption">
<h2>상품 3</h2>
<p>상품 3 설명 텍스트</p>
<p>가격: 12,345원</p>
</div>
</li>
</ul>
</div>
</body>
</html>주석 부분이 설명란을 상품 사진에 띄우는 style입니다
이제 여기서 아래의 코드를 사용하여 트랜지션을 적용해 화면에 바로 나타나는 것이 아니라 천천히 올라오도록 하였다.
transition: all 0.5s ease-in-out;
애니메이션
CSS 애니메이션은 CSS 스타일을 부드럽게 전환시켜주며 한 번 정의하면 자동으로 시작하고 반복 속성을 지정할 수 있다.
@keyframes <키프레임 이름> {
from { <스타일> …}
<지점> { <스타일> …}
to {<스타일> …}
}
애니메이션은 기본적으로 정의한 from에서 to 순서로 진행하는데
animation-direction: normal | reverse | alternate | alternate-reverse;
위의 속성을 통해 진행 순서의 방향을 바꿀 수 있다.
애니메이션을 적용할 요소에 animation-name 속성을 사용하여 애니메이션을 지정한다.
애니메이션을 지정할 때 @keyframes 에서 지정한 키프레임 이름을 사용한다.
애니메이션 실행 시간의 경우 기본값이 0이기 때문에 지정하지 않으면 애니메이션이 실행되지 않는다.
animation-duration: <시간>;
만약 상황에 따라 애니메이션을 반복해야 한다면
animation-iteration-count: <횟수> | infinite;
횟수를 지정하거나 무한 반복을 통해 반복하도록 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{margin: 0; padding: 0;}
ul, li{ list-style: none;}
.slide{height: 300px; overflow: hidden;}
.slide ul{width: 400%; display: flex; animation: slide 8s infinite;}
.slide li{width: 25%; height: 300px;}
.slide li:nth-child(1){background: #ffa;}
.slide li:nth-child(2){background: #faa;}
.slide li:nth-child(3){background: #afa;}
.slide li:nth-child(4){background: #aaf;}
@keyframes slide{
0% {margin-left: 0;}
10% {margin-left: 0;}
25% {margin-left: -100%;}
35% {margin-left: -100%;}
50% {margin-left: -200%;}
60% {margin-left: -200%;}
75% {margin-left: -300%;}
85% {margin-left: -300%;}
100% {margin-left: 0;}
}
</style>
</head>
<body>
<div class="slide">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
이런 식으로 네이버나 다음과 같은 유명 포털 사이트들 메인에 있는 자동으로 넘어가는 배너를 구현할 수 있다.