인파

You Can Become A

늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !

공부한 내용을 정리합니다
Library/JS 라이브러리 모음

🎨 Animate.css - 애니메이션을 클래스로 간편하게 사용

Animate.css Animate.css는 css의 애니메이션 효과들을 라이브러리화 하여 누구나도 css 깊을 지식 없이 사용하기 쉬운 애니메이션 라이브러리 이다. 예를들어 부트스트랩이 css 디자인 템플릿을 클래스로 설정한다고 하면, 이건 애니메이션 부트스트랩 이라고 보면 된다. Html 엘리먼트에 클래스명만 부여하면 고퀄리티의 애니메이션 효과를 적용할수가 있어 사용하기 편하게 구성되어 있다. Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasi..

category_image
인파_
2022.07.03
(0)
Style Sheet/CSS

🎨 transition / transform / animation 속성 사용법

CSS 트랜지션 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 쉽게 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기가 변화하는 설정을 가미했는데, 뚝뚝 바로바로 변화하는 것 보단 부드럽게 전환되는 효과를 지정해 줄 때 사용한다고 보면 된다 transition은 전환되는 모션을 추가로 가미하는 속성이지 그 자체로 스타일을 주는 속성은 아니다. 그래서 :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 그리고..

category_image
인파_
2021.10.19
(0)