Transition2 [javascript] CSS transition 애니메이션 (타이밍 함수) 참고: https://zellwk.com/blog/css-transitions/ HTML 구성요소를 애니메이션화하는 가장 간단한 방법은 CSS transition을 사용하는 것 입니다. 이 포스트에서는 CSS transition이 어떻게 작동하는지, 또 이를 활용해 어떻게 애니메이션을 만드는지를 알아보겠습니다. transition은 CSS 속성이 일정한 기간동안 하나의 값에서 다른 값으로 변경될 때 발생합니다. 다음의 예와 같이 transition 속성을 사용하여 CSS transition을 생성할 수 있습니다: .selector { transition: property duration transition-timing-function delay; } transition 속성은 transition-prop.. 2022. 11. 25. [javascript] 자바스크립트 fade-in 페이지 전환 효과 만들기 참고: https://www.digitalocean.com/community/tutorials/js-simple-page-fade-in 페이지 전환 효과는 애플리케이션 사용자의 사용자 경험에 심미적 효과를 줍니다. javascript는 dom(document object model)이 로드될 때를 감지해 css 클래스를 추가/제거 하여 화면 전환 fade-in 효과를 만들 수 있습니다. Step 1 - CSS opacity와 transition 사용하기 먼저 페이지가 열리는 시간과 fade-in되는 시간에 대한 css 규칙을 만들어야 합니다. 이 효과가 어떻게 보일지는 css의 opacity와 transition 속성에 의해 달라집니다. body 항목에 fade 클래스를 추가/제거 함으로 opacity가.. 2022. 6. 13. 이전 1 다음
