CSS3 transition 활용
css 기법으로 애니메이션 구현
- transition을 이용하여 즉시 변화하는 것에서 자연스럽게 변화하게 할 수 있다.
- 참고자료 : https://thoughtbot.com/blog/transitions-and-transforms
- Javascript보다 빠르며, 특히 모바일 웹에서는 transform응 사용한 element 조작을 많이 구현한다.
더 빠른 css3 애니메이션 관련 속성들
- GPU 가속을 이용하는 속성을 사용하면 애니메이션 처리가 빠르다.
- 메인 쓰레드에서 처리되는 것이 아닌, 그래픽 카드로 처리를 위임하기 때문에 메인 쓰레드를 방해하지 않는다.
- 참고자료 : https://d2.naver.com/helloworld/2061385
- transform: translate(); - 이동
- transform: scale(); - 확대/축소
- transform: rotate(); - 회전
- opacity - 투명도
벤더 프리픽스(vendor prefix)
- 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등 주요 웹 브라우저 공급자 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다.
- 아직 css 권고안에 포함되지 못한 기능이나, css 권고안에는 포함되어 있지만 아직 완벽하에 재정된 상태가 아닌 기능을 사용하고자 할 때 사용한다.
- 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다.
.button {
background: red;
<!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow);
<!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow);
<!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow);
<!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow);
<!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow);
<!-- CSS 표준 문법 코드 -->
}
Author And Source
이 문제에 관하여(CSS3 transition 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@doforme/CSS3-transition-활용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- GPU 가속을 이용하는 속성을 사용하면 애니메이션 처리가 빠르다.
- 메인 쓰레드에서 처리되는 것이 아닌, 그래픽 카드로 처리를 위임하기 때문에 메인 쓰레드를 방해하지 않는다.
- 참고자료 : https://d2.naver.com/helloworld/2061385
- transform: translate(); - 이동
- transform: scale(); - 확대/축소
- transform: rotate(); - 회전
- opacity - 투명도
벤더 프리픽스(vendor prefix)
- 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등 주요 웹 브라우저 공급자 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다.
- 아직 css 권고안에 포함되지 못한 기능이나, css 권고안에는 포함되어 있지만 아직 완벽하에 재정된 상태가 아닌 기능을 사용하고자 할 때 사용한다.
- 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다.
.button {
background: red;
<!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow);
<!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow);
<!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow);
<!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow);
<!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow);
<!-- CSS 표준 문법 코드 -->
}
Author And Source
이 문제에 관하여(CSS3 transition 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@doforme/CSS3-transition-활용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.button {
background: red;
<!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow);
<!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow);
<!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow);
<!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow);
<!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow);
<!-- CSS 표준 문법 코드 -->
}
Author And Source
이 문제에 관하여(CSS3 transition 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@doforme/CSS3-transition-활용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)