주님 감사드립니다!
CSS_transition
인프런 - 인터랙티브 웹 개발 제대로 시작하기 를 수강하며 적는 글
숫자(!)로 된 CSS값에 변화가 있을 때, 변화의 속도. delay등을 설정해줄 수 있다.
💡MDN의 설명 : Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.
MDN에서 가져온 예시
전시간에 했던 transform을 다시 한번 봐보면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box-container{
display: flex;
}
.box{
width: 100px;
height: 100px;
border : 1px solid black;
background: rgba(255,255,0,0.7);
}
.box:hover{
transform: scale(2);
}
</style>
</head>
<body>
<h1>CSS Transform</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos, facilis iure sapiente
repudiandae provident ipsam corrupti amet minus odio
voluptatum rerum sint minima autem vel! Repellendus inventore deleniti corrupti magni.
</p>
<div class="box-container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nisi consectetur in quibusdam corrupti beatae repellat
ad quis impedit vero veniam ratione voluptas aperiam
repellendus voluptate voluptatum quas eius, commodi tempora!
</p>
</body>
</html>
이때는 어떤 애니메이션도 없이 바로 탁탁! 바뀐다.
이걸 부드럽게 처리하고 싶을 때, transition을 사용해줄 수 있다.
<style>
.box-container{
display: flex;
}
.box{
width: 100px;
height: 100px;
border : 1px solid black;
background: rgba(255,255,0,0.7);
transition: 1s; /*이거 추가!*/
}
.box:hover{
transform: scale(2);
}
</style>여기서 이런식으로 transition을 추가해주면, (box에 마우스를 hover했을 때 변형을 주는 거기 때문에 box에 속성을 추가해줌) 1초동안 애니메이션이 진행된다.
지금은 그냥 transition 축약형으로 되어있는데, 전체 속성을 확인해보려면
MDN_transition문서와, 크롬 개발자도구를 확인해보는 게 좋다.
다양한 속성들이 있는 걸 볼 수 있다.
- transition-duration은 변환속도 (위에서 사용한)
- transition-timing-function은 옆에있는 보라색을 눌러보면
이런게 나오는데, 이거는 애니메이션의 가속도다. 애니메이션이 처음부터 끝까지 일정한 속도로 진행되는 게(등속도) 아니라, 속도가 바뀌면서 진행되는데 이 속도를 조정해줄 수 있다. 예를들어
이렇게 마우스로 저 보라색 점들을 눌러서 조정해주면, 밑에 계산된 숫자가 나오는데 이걸 코드에 적용시켜주면,
.box{
width: 100px;
height: 100px;
border : 1px solid black;
background: rgba(255,255,0,0.7);
transition: 1s cubic-bezier(0.02, 1.13, 0.9,-0.05);
}
.box:hover{
transform: scale(3); /*효과를 더 잘보여주기위해 크기를 3배로 키웠다. */
}이렇게 적용시켜줄 수 있고, 그 결과
이런식으로 속도가 조정되서 변화하는 걸 볼 수 있다.
여기서 같은 속도로 움직이게 해주고 싶으면
transition: 1s linear; 이렇게 해주면 된다.
-
transition-delay;은 얼마나 뒤에 애니메이션이 시작할 건지.
transition-delay: 1s;로 설정해주면, 1초뒤에 애니메이션이 시작한다. -
transition-property는 어떤 요소에 transition을 쓸지.
transition-property: all;는 모든 요소에 transition을 쓰겠다는 말. 지금은 transform에서 scale만 바꼈지만 이거 뿐만이 아니라 width, height등 모든속성에 적용된다는 의미이다. 참조블로그
예를들어
.box{
width: 100px;
height: 100px;
border : 1px solid black;
background: rgba(255,255,0,0.7);
transition: 1s ;
}
.box:hover{
width: 200px;
height: 200px;
}이런식으로, width와 height를 변경해주는 게 있다고 한다면,
이런식으로 현재는 둘다 동일한 속도로 애니메이션이 적용된다. 여기서,
.box{
width: 100px;
height: 100px;
border : 1px solid black;
background: rgba(255,255,0,0.7);
transition: 1s ;
transition-property: width;
}
.box:hover{
width: 200px;
height: 200px;
}이렇게 transition-property: width;를 넣어주면,
이렇게 height에는 적용이 안되고, width에만 transition이 적용된 걸 볼 수 있다!
transition을 적용할 때 주의할 점은 숫자로 표현된 숫자에만 적용된다는 점이다. ex) width: auto 이런식으로 되어있으면 transition이 적용 안된다.
주님 감사드립니다! 아멘!
