[Web] 간단한 트랜지션부터 꽤 어려운 트랜지션까지

트랜지션 주기는 굉장히 쉽다.

아주 간단한 트랜지션부터 살펴보자.

 

See the Pen Basic Transition by Jirong (@jirongkim) on CodePen.

 

 

 

이모티콘에 마우스를 올리면(hover) 투명도가 50% 되는 코드이다.

 

https://hyun222.tistory.com/313

[Web] Javascript 없이 이벤트 효과를 주고 싶다면 pseudo

 

pseudo 코드를 알고있다면 아주 쉽게 할 수 있다.

 

시작할 때의 이미지, 완료되었을 때의 이미지가 있다면

transition: all 1s => 변화하는 요소들을 1초에 걸쳐서 바꿔라.

라는 것으로 쉽게 트랜지션을 줄 수 있다.

 

 

---

 

조금 더 심화된것도 만들어볼 수 있다.

 

See the Pen Hard Transition by Jirong (@jirongkim) on CodePen.

 

overflow: hidden을 줘서 넘치는 부분을 안보이게 처리하고, 문구의 위치를 position을 이용해서 내리면 된다.

그리고 모든 박스를 감싸는 div 태그를 하나 더 만든 후 걔에다가 pesudo를 주면 된다.

 

.wrapper:hover .box-info{
    top:50%
}

이런 신기한 css 선택자를 이용하면, wrapper에 마우스가 올려졌을 때

wrapper 안에 있는 .box-info라는 class의 top이 변경되는 것이다.

 

그리고 .box-info에서는 본인의 요소중 하나라도 변할 때, 1초에 걸쳐서 변하게 만들면 된다.