웹사이트가 정적인것도 좋지만 전환되는 속성을 넣어줘서 역동적이고 재미있는 웹사이트를 만들 수 있다.
transitions 속성에 대해 알아보자.
Transitions
Transitions = 자동으로 시작하지 않고 hover나 onclick 같은 의사 클래스에 의해 동작한다. layout에 영향을 주는 요소의 크기나 위치가 변화하면 영향을 받는 모든 요소들의 크기나 위치를 재계산 하게 되는데 영향을 받는 요소들이 많을수록 많은 부하가 간다.
Animations = hover나 onclick 같은 의사 클래스가 필요하지 않고 자동으로 시작한다. 애니메이션은 시작, 정지, 반복까지 제어할 수 있다.
transition-property
전환해야 하는 CSS 속성의 이름을 기재한다. 여러개인경우 공백을 사이에 두고 입력한다.
이 때 기재한 속성만 트랜지션하는 동안 움직인다.
transition-duration
전환되는 시간을 기재한다.
transition-timing-function
가속도 곡선을 설정하여 전환 속도가 지속 시간에 따라 달라질 수 있도록 한다.
transition-timing-function은 <easing-function>을 사용한다.
<easing-function>ease:
천천히 시작해서 중간까지는 속도가 빨라지다가 다시 느려진다. 전환이 왕복으로 진행될 때 중간 지점까지 빨라진다.
cubic-bezier(0.25, 0.1, 0.25, 1.0)linear:
일정한 속도로 전환된다.
cubic-bezier(0.0, 0.0, 1.0, 1.0)ease-in:
천천히 시작해서 빨라진다.
cubic-bezier(0.42, 0, 1.0, 1.0)ease-out:
빠르게 시작해서 느려진다.
cubic-bezier(0, 0, 0.58, 1.0)ease-in-out:
천천히 시작해서 빨라지다가 다시 느려진다. 전환이 편도로 진행될 때 빨라지다가 다시 느려진다.
cubic-bezier(0.42, 0, 0.58, 1.0)cubic-bezier(.25,-0.25,.75,1.25):
일정한 속도로 전환되며 시작점과 종료점에서 약간 흔들린다.
cubic-bezier(x1, y1, x2, y2)과 같이 3차원 베지어 곡선으로 값을 입력한다. x1, y1, x2, y2 값은 0부터 1 사이의 숫자를 입력한다.steps( 5, jump-start ):
transition-duration에 설정한 시간 길이 마다 5번 멈추고 시작점 다음부터 시작한다.
jump-start 대신 start로 사용할 수 있다.steps( 5, jump-end ):
transition-duration에 설정한 시간 길이 마다 5번 멈추고 종료점 전까지만 전환한다.
jump-end 대신 end로 사용할 수 있다.jump-none:
transition-duration에 설정한 시간 길이 마다 5번 멈춘다.
jump-both:
transition-duration에 설정한 시간 길이 마다 5번 멈추고 시작점 다음부터 시작하고 끝점 전까지만 전환한다.
steps(1, jump-start):
종료점에 멈춰있다.
steps(1, jump-start) 대신 step-start로 사용할 수 있다.steps(1, jump-end):
시작점에 멈춰있다.
steps(1, jump-end) 대신 step-end로 사용할 수 있다.기본 예시
기다리면 전환되는것을 볼 수 있다.
transition-delay
속성 전환된 후 다시 전환될때까지의 시간을 기재한다.
transition
줄여서 transition:
코드
CSS
.card.container {
width: 300px;
height: 450px;
border: none;
position: relative;
overflow: hidden;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
.card.container .thumb {
width: 100%;
height: auto;
}
.card.info {
position: absolute;
top: 500px;
width: 300px;
height: 450px;
}
.card.container:hover > .card.info {
top: 0;
transition-duration: 1s;
transition-timing-function: ease-in-out;
background: linear-gradient(transparent, #DFD6D2);
display: grid;
justify-content: center;
align-content: center;
}
.card.container:hover .thumb {
transform: scale(1.2, 1.2);
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
HTML
<figure class="card container"> <img src="이미지 URL" alt="card 샘플 이미지" width="300" height="450" class="thumb"> <figcaption class="card info"> <div class="title">Transition</div> <div class="content">TEST</div> </figcaption> </figure>
기본 예시
사용된 코드 설명
position: relative;
:
선택한 요소를 기준으로 배치한다.
position: absolute;
:
상위 요소 기준으로 배치한다.
overflow: hidden;
:
넘치는거 숨긴다.
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
:
Y축 기준으로 5px 내려오고 그림자 테두리가 10px만큼 퍼지고 불투명도 50%의 검정색으로 박스 그림자 만든다.
transition-duration: 1s;
:
전환되는 시간을 1s로 설정한다.
transition-timing-function: ease-in-out;
:
전환될 때 속도가 천천히 시작해서 빨라지다가 다시 느려진다.
transform: scale(1.2, 1.2);
:
X축 1.2배, Y축 1.2배로 크기를 키운다.
background: linear-gradient(transparent, #DFD6D2);
:
백그라운드 배경을 위쪽은 투명, 아래쪽은 antiquewhite로 그라디언트로 설정한다.
참고
MDN Web Docs - Using CSS transitions
공부 목적 블로그