네이처리 노트
[CSS] animating movement | transition, transform, animation 본문
공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요
🎀 Transition
속성을 서서히 변화시킵니다.
display는 block & none 일 때, transition이 적용되지 않는다! 하지만 시각적으로만 숨김으로써 적용할 수 있습니다.
reference 1,2 참고
≫ transition-timing-function : transition의 진행 속도를 조절합니다.
ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit
ex) 모달 효과 (opacity로 적용해보기)
.custom-modal{
/* display: none; */
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
overflow: hidden;
outline: 0;
opacity: 0;
transition: ease 0.3s; /* 아주 미세한 부드러움 추가 */
}
.custom-modal.show{
/* display: block; */
visibility: visible;
opacity: 1;
background-color: rgba( 0, 0, 0, 0.62 ); /* 투명도가 전이되지 않게 배경색을 rgba 로 사용함 */
}
.custom-modal.show .modal-backstage{
width: 100%;
height: 100%;
pointer-events: none;
}
🎀 Transform
요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다.
reference 3 참고
scale 축소 / 확대
transform: scale(1); /* 기준 */
transform: scale(0.95); /* 축소 */
transform: scale(1.15); /* 확대 */
버튼 눌리는 효과주기
button:active{
transition: ease-in-out 0.1s;
transform: scale(0.97);
box-shadow: 2px 2px 10px #eee inset; /* 눌렸을 때 그림자로 입체감넣기 */
}
🎀 Animation
CSS애니메이션 초보자 입문서 / 동적효과 관련내용
reference 4 참고
div {
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
≫ animation option
- animation-name : 애니메이션 이름은 square-to-circle 입니다.
- animation-duration : 애니메이션 길이는 2s 입니다. (time| initial | inherit)
- animation-delay : 시작 전 딜레이는 1s 입니다. (time| initial | inherit)
- animation-iteration-count : 반복횟수는 infinite 으로 멈추지 않습니다.
- timing-function : CSS Easing animation tool 에서 쉽게 계산하여 속도감 정의할 수 있음
- animation-direction : 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.
Reference
CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성
transition transition은 속성을 서서히 변화시키는 속성입니다. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다. IE는 버전 10부터 지원합니다. 문법 transit
www.codingfactory.net
2) display none이 transition이 안먹히는 이유
display none이 transition이 안먹히는 이유
해결방법 말고 원인 궁금하지 않나요..?🤓
velog.io
3) https://www.codingfactory.net/12593
CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회
www.codingfactory.net
4) https://www.codingfactory.net/11163
CSS / 애니메이션 / animation
CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드
www.codingfactory.net
5) CSS애니메이션 초보자 입문서 (브라우저별 지원방법 포함)
CSS 애니메이션 초보자 입문서
요즘에는 점점 더 많은 웹사이트들이 GIF, SVG, WebGL, 배경 비디오 등의 형태를 이용하여 애니메이션을 사용하고있습니다. 제대로 사용한다면 웹 상의 애니메이션들은 웹사이트의 활력을 불어넣고
webdesign.tutsplus.com
'개발기록 > HTML CSS' 카테고리의 다른 글
[CSS] dom style | CSS 가상셀렉터 | 마우스 클릭이벤트 | 텍스트 효과 (0) | 2022.08.31 |
---|---|
[CSS] 레이아웃 | position, display, float, 반응형 웹 (0) | 2022.08.31 |
[CSS] 자주 사용하는 CSS | 폰트, 블록, 배경 | font, padding, margin, background (0) | 2022.08.31 |
[CSS] 선택자(selector)모음 (0) | 2022.08.30 |
[HTML] input button과 button태그 비교하기 (0) | 2022.08.29 |