이전에는 페이지에 효과를 주기위해선 자바스크립트를 사용해야 했지만 CSS에서도 이를 가능하게 하는 방법이 생겼습니다.
이번에는 이 방법들에 대해 알아보겠습니다.
transition : 어떤 조건일때 특정 상태에서 다른 상태로 "변화" 시키는 방법을 컨트롤합니다.
기본 구조는 transition : "변화시킬 속성" "변화할 시간" "변환방식";
입니다.
예제를 통해 알아보겠습니다.
<!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">
<style>
a{
background-color: aqua;
color: teal;
font-size: 50px;
border-radius: 10px;
text-decoration: none;
}
a:hover{
background-color: teal;
color: aqua;
}
</style>
<title>Document</title>
</head>
<body>
<a href="#">
Hover Button
</a>
</body>
</html>
이처럼 transition을 주지 않을 경우, hover 조건일때 a{} 상태에서 a:hover{} 상태로 효과 없이 변화하게 됩니다.
이제 transition을 적용한 경우를 살펴보겠습니다.
<style>
a{
background-color: aqua;
color: teal;
font-size: 50px;
border-radius: 10px;
text-decoration: none;
transition: background-color 3s ease-in-out, color 3s ease-in-out;
}
a:hover{
background-color: teal;
color: aqua;
}
</style>
이처럼 transition을 사용하면 변화를 컨트롤할 수 있습니다.
transition의 몇가지 특별한 사용방법에 대해 알아보겠습니다.
transition : all "변화할 시간" "변환방식";
을 사용하여 변화되는 모든 속성을 선택할 수 있습니다.
transition : "변화시킬 속성" "변화할 시간" "변환방식", "변화시킬 속성" "변화할 시간" "변환방식", ...
이처럼 쉼표를 사용해 계속해서 이어 붙일 수 있습니다.
transition은 state selector이 없는 곳에서 사용되어야 합니다.
(예를 들면 .a:hover{}이 아닌 .a{}에 정의)
ease-in-out같은 "변환방법"
은 이미 정의된 방법을 사용할 수 있고, 사용자가 직접 비율을 지정하여 사용할 수 있습니다.
이 사이트에서 여러 변환 방법과 예제를 확인할 수 있습니다.
transform은 HTML 요소의 모양, 크기, 위치, 각도등을 자유롭게 변경시키는 속성입니다.
<!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">
<style>
img{
width: 200px;
height: 200px;
border: 3px solid black;
border-radius: 50%;
}
img:first-child{
transform: translateX(-100px);
}
img:nth-child(2){
transform: rotate(0.5turn);
}
img:nth-child(3){
transform: scaleY(2);
}
img:nth-child(4){
transform: skew(30deg, 20deg);
}
</style>
<title>Document</title>
</head>
<body>
<img src="img/gugu.jpg">
<img src="img/gugu.jpg">
<img src="img/gugu.jpg">
<img src="img/gugu.jpg">
</body>
</html>
기본 이미지를 translate로 위치를 옮기거나
rotate로 돌리거나, scale로 늘리고 줄이거나, skew로 x, y각도로 기울일 수 있습니다.
그런데 그냥 transform만 사용하면 약간 밋밋합니다.
transition를 곁들이면 더 이쁜 효과를 만들 수 있을 것 같습니다.
<!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">
<style>
img{
width: 200px;
height: 200px;
border: 3px solid black;
border-radius: 50%;
transition: transform 3s ease-in-out;
}
img:hover{
transform: rotateX(0.5turn) translateX(400px);
}
</style>
<title>Document</title>
</head>
<body>
<img src="img/gugu.jpg">
</body>
</html>
tranform과 transition을 같이 사용하니 그럴듯한 효과가 만들어졌습니다.
(rotateX가 회전을 저렇게 하는진 상상도 못했는데 과정을 보니 새롭게 느껴지네요 ..)
transform 효과는 매우 많은 종류가 있는데
여기서 또는 여기서확인할 수 있습니다.
지금까지 배운것들이 다 animation같은데 또 따로 animation이라는 개념이 나왔습니다.
차이가 무엇일까요?
transition으로 만든 효과는 항상 특정 조건(:hover, :active...)일때만 실행됐습니다.
이번에 배워볼 animation은 이를 보완하여 우리가 원하는 만큼, 원할때 실행할 수 있도록 도와줍니다.
animation은 keyframes를 사용하여 만드는데 기본 구조는 아래와 같습니다.
@keyframes animation-name{
from {
설정 효과;
}
to {
설정 효과;
}
#또는 0% {} 25% {} 50% {} 75% {} 100% {} 등도 있습니다.
}
.class{
animation : animation-name "설정 시간" "변환 효과" "변환 기간"
}
이제 실제로 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">
<style>
img{
width: 200px;
height: 200px;
border: 3px solid black;
border-radius: 50%;
animation : guImg 3s ease-in-out infinite;
}
@keyframes guImg {
0%{
transform : rotateY(0);
}
25% {
transform: rotateY(0.25turn) scale(1.5);
border-radius: 25%;
}
50% {
transform: rotateY(0.5turn) scale(2);
border-radius: 5%;
}
75% {
transform: rotateY(0.25turn) scale(1.5);
border-radius: 25%;
}
100% {
transform: rotateY(0);
}
}
</style>
<title>Document</title>
</head>
<body>
<img src="img/gugu.jpg">
</body>
</html>
state selector을 사용하지 않아도 animation이 잘 작동하는 것을 확인할 수 있습니다.
이처럼 animation을 사용하는 이유와 예제도 살펴봤습니다.
animation의 여러 방식을 소개한 사이트인데 매우 유용하므로 필요하면 사용하시면 됩니다!
아무래도 js보다 css로 애니메이션을 만드는게 최적화에 좋다보니까 알아두면 많이 도움이 될 것 같네요 :) 감사합니다!