기초) hover 선택자와 transition 속성 정리

 

 

 

 

: hover

 

 

hover는 사용자가

마우스를 특정 대상에 올렸을 때

미리 입력해둔 효과가 나타나게 해주는

기능이 있다.

 

 

 

 

 

---

 

 

 

사용 방법

 

 

스타일 효과를 주기 원하는

대상 선택자와 함께 표기해 주며

 

 

div:hover { }

a:hover { }

p:hover { }

 

 

식으로 쓰인다.

 

 

 

 

샘플)

div {width:300px; height: 300px; border: 1px solid red;} 
div:hover {border-radius: 300px;}

 

 

 

 

 

 

*hover 선택자 만으로도

애니메이션 효과는 있지만

밋밋하고 투박하다.

 

 

그 밋밋함을 도와 디테일을

넣어주는 속성이 바로

transition!

 

 

 

---

 

 

 

trandsition

 

 

hover라는 특수 입력 값 없이

transition만을 넣으면

아무런 반응도 나타나지 않기에

 

 

transition은 반드시 hover혹은

기타 다른 상호작용 선택자와

함께 사용해야 한다.

 

 

 

 

 

 

 

사용방법

 

 

효과를 주고자 하는 선택자(selector)를

두 개로 나누어 연달아 작성하고 값을

넣어준다.

 

 

 

 

 

1. 기본 설정

 

transition-property:.

어떤 속성의 효과를 주고 싶은지 설정.

(hover에 설정한 값과동일하게 넣으면 된다)

 

예)

div { transition-property :border-radius; }

div:hover {border-radius: 200px; }

 

 

* 참고

property에는 한 가지 이상의 값이

들어갈 수 있으며 쉼표 (,)로 구분한다.

(아래 샘플 코드 box1 참고)

 

 

 

 

 

2. 추가 transition 속성 옵션

 

1️⃣transition-duration :2s;

효과 시간 설정

 

 

 

2️⃣transition-delay: 1s;

몇 초 후에 실행될지 설정

 

 

 

3️⃣transition-timimg-function: ease;

움직이는 방법 설정, 천천히 가다가 빠르게

똑같이 딱딱하게 등을 설정할 수 있다.

 

값으로는

 

ease:가장 많이 쓰이는 기본값 설정으로

자연스럽게 움직인다

 

ease-in: 천천히 시작 후 가속

 

ease-out: 빠르게 갔다가 천천히 멈춤

 

lenear: 처음부터 끝까지 같은 속도

 

cubic-bezier() : 아직 안 배움

 

 

 

 

 

샘플)

 

.box1 {width:300px; height: 300px; border: 1px solid red;
       transition-property:border-radius, background;
       transition-duration:2s;
       transition-delay:1s;
}
.box1:hover {border-radius:300px; background:purple;}


.box2 {width:200px; height:200px; border:1px solid black;
       position: relative; left:0;
       transition-property:left;
       transition-duration:2s;
       transition-delay:
       transition-timing-function: ease;
}
.box2:hover {left: 300px;}

 

 

 

 

---

 

 

 

 

실무에서 쓰는 방법

 

 

transition은

위처럼 속성 옵션들을 

하나하나 나열해 쓰지 않고

한 줄로 쓰는 방법이 있다.

 

 

 

 

.box3 {width:300px; height:300px; background:pink;
       transition: background 2s 1s ease, border-radius 3s; }

.box3:hover { background:red; border-radius: 0 300px 0 300px;}

 

 

 

 

 

 

 

 

 

 

transition:

background 2s 1s ease;

무엇을 / 몇 초동안 / 몇 초 뒤에 / 속도

 

순으로 원하는 값을 넣어주자