[CSS] transition , transform으로 애니메이션 주기
2019. 5. 14. 17:05ㆍCSS
JavaScript의 setTimeout, requestAnimationframe 을 이용해서 JS에서 애니메이션을 주었었는데 사실 CSS로 하면 훨씬 간편하고 간단한 애니메이션을 구현할 수 있습니다. (좋은 성능은 덤:)
CSS3에서 traisition을 활용하면 부드러운 UX를 제공합니다.
이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있고
특히 모바일 웹에서 큰 힘을 발휘하여 transform을 사용해서 element 조작을 많이 구현합니다.
CSS3 애니메이션 관련 속성들
GPU가속을 이용하는 속성을 사용해서 더 빠른 애니메이션 처리를 할 수 있습니다.
- transform : translateXX(); ex) translate(20px, 30px); - x축으로 20px, y축으로 30px이동
- transform : scale(); ex) scale(-0.5) 높이,너비 반으로 축소. -1은 없으므로 축소하다 원래 사이즈로!!
- transform : rotate(); ex) rotate(30deg) 30도 만큼 우측으로 회전
- opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
position: relative;
background-color:#de0000;
width: 100px;
color: #ffffff;
left: 20px;
transition: all 1s; /* 만약 변할 때 모든 속성(all)을 3초동안 변화해라*/
}
.div2:hover{
transform: skew(20deg);
}
.square1{
background: #00aa9d;
border-radius: 5px;
height: 150px;
width: 150px;
position: absolute;
margin: 100px;
transition: transform 1s;
}
.square2{
background: #2b3f55;
border-radius: 5px;
height: 150px;
width: 150px;
position: absolute;
margin: 100px;
transition: transform 0.7s;
}
.square2:hover{
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="div1">CSS애니메니션</div>
<div class="square1"></div>
<div class="square2"></div>
</body>
</html>추가 예제 : https://thoughtbot.com/blog/transitions-and-transforms#shorthand-example-for-transition-duration
[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다