FrontEnd/css
[ Css ] Transition 트랜지션 사용하기
SangHoonE
2021. 10. 26. 13:48
안녕하세요 상훈입니다.
우리의 WebApplication을 조금이라도 더 예쁘게 꾸며줄 css - transition을 포스팅하겠습니다.
그 중 hover의 이벤트를 사용하려고 합니다.
html에서는 클래스명만 정해주시면 됩니다.
<body>
<p>width, height, bg-color, transform 을 위한 트랜지션 결합.</p>
<div class="transform"></div>
</body>클래스명 "transform"에 대해서 아래의 style을 지정해주면 됩니다.
<style>
.transform{
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.transform:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
rotate를 보시면 아시다시피 transition 과 transform으로 지정한 내용을 살펴보면,
2초동안 [ 가로 200px, 세로 200px, 배경색 #FFCCCC, 180도 회전 ] 을 하게됩니다.
이상입니다.
해당 내용은 전부 'MDN WebDocs' 에 작성되어져 있습니다.
CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN
CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니
developer.mozilla.org
반응형