🐾 transition(변환속성)
: 선택자가 변화되거나 혹은 동작이 있을때 시간의 흐름을 부여하여 변화시키는 속성
🔎 transition과 함께 사용가능한 속성
- 사이즈관련 - width, height, margin, padding,
- 선관련 - border-width, border-color, border-radius
- 색상관련 - color, background-color, opacity
- 변환관련 - transform
- 위치관련 - top, left, right, bottom
🔎 transition 속성
transition-delay
: 지연값, 변화되는 시간을 지연시키는 속성
ex)transition-delay: 1s>> 1초후 시작.line:nth-child(1) { background-color: #e26f78; transition-delay: 0s; } .line:nth-child(2) { background-color: #efd5c4; transition-delay: 1s; } .line:nth-child(3) { background-color: #f29053; transition-delay: 2s; } .line:nth-child(4) { background-color: #8bb797; transition-delay: 3s; } .line:nth-child(5) { background-color: #545f9a; transition-delay: 4s; }
transition-duration
: 몇초 동안 재생할지, 변화되는 시간을 작성하는 속성
ex) transition-duration1s >> 🌟1초동안 실행<style> div{ width: 300px; height: 300px; background-color: aquamarine; } div:hover{ width: 400px; height: 400px; transition-duration: 0.5s; } </style>hover하기전
hover한후,
transtion-property
: 변화되는 CSS를 구분하여 따로 처리
ex)transition-property: 속성명, 속성명;
all(전체선택가능)
👉 transition-property: width, background-color;
transition-timing-function
: 변화되는 시간에 속도를 부여하는 속성(=수치변형함수)
section {
width: 700px;
overflow: hidden;
padding: 30px;
border: 3px solid #000;
margin: 150px auto;
}
.line {
width: 30px;
height: 30px;
background-color: #ff57a5;
margin: 10px 0px;
transition-duration: 0.8s;
/*동작 구현에 대한 시간 값 ~ 얼마동안 */
}
section:hover .line {
width: 700px;
}
<body>
<section>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</section>
</body>
hover하면,
색깔이 다 똑같아서 알아보기가 힘드니까 각 색상을 한번 줘보자.
- linear - 시작부터 끝까지 같은 속도
- ease - 기본값(천천히 시작~ 빨라진 후 천천히 끝낸 속도)
- ease-in 속도의 시작이 느리게.
- ease-out 속도의 끝이 느리게.
- ease-in-out 느리게 시작 ~ 느리게 끝
.line:nth-child(1) {
background-color: #e26f78;
transition-timing-function: linear;
/*시간에 따른 움직이는 속도의 값 - 일정한 속도*/
}
.line:nth-child(2) {
background-color: #efd5c4;
transition-timing-function: ease; /*기본값*/
}
.line:nth-child(3) {
background-color: #f29053;
transition-timing-function: ease-in;
/*속도의 시작이 느리게*/
}
.line:nth-child(4) {
background-color: #8bb797;
transition-timing-function: ease-out;
/*속도를 느리게 끝*/
}
.line:nth-child(5) {
background-color: #545f9a;
transition-timing-function: ease-in-out;
/* 느리게 시작 느리게 끝*/
}직접 코드를써보고 움직임을 확인하는것이 좋다 🤗
한꺼번에 적용가능
transition
: 속성들을 한번에 처리하는 속기법으로 여러개의 속성을 동시에 적용 가능.
: 속성(property) - 시간(duration) - 이징(duration) - 지연(delay)
ex)
transition: all 1.5s ease 0.5s;전체의 요소들이 1.5초의 시간을 가지며 ease의 변화로 0.5후 시작됨.
나를위한 노트필기 📒🔎📝