| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- Download
- FRONT
- components
- npm
- CSS
- 시멘틱태그
- 상태관리
- react
- error
- develop
- frontend
- axios
- 이미지
- VUE
- NeXT
- useState
- 리액트기초
- Chart
- 프론트엔드개발
- vscode
- 프론트엔드
- JavaScript
- err
- TradingVIew
- antd
- vue-cli-service
- type
- form
- Package
- 리액트
Archives
- Today
- Total
목록Animation (1)
개발쬬
[CSS] class로 페이드 효과 넣어주기 fade-up fade-down
[CSS] 페이드 효과 넣어주기 fade-up fade-down scss up, 이나 down 등 여러가지 애니메이션 효과를 지정해 줄 수 있다. 해당 class 명을 사용해 원하는 곳에 넣어주면 된다..fade { &-up { opacity: 0; animation: fadeUp 1s ease forwards; } &-down{ opacity: 0; animation: fadeDown 1s ease forwards; } } css forwards 설정을 넣어줌으로써 애니메이션 상태가 유지될 수 있도록 해준다..fade-up { opacity: 0; animation: fadeUp 1s ease forwards; } animation keyframes 를 지정한 후 0% - 100% 상태를 변경해준다..
쬬의 CSS
2023. 8. 8. 19:25