| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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
- CSS
- vscode
- useState
- VUE
- 이미지
- 상태관리
- err
- Package
- form
- 리액트
- components
- error
- vue-cli-service
- 시멘틱태그
- axios
- TradingVIew
- 리액트기초
- NeXT
- Chart
- develop
- FRONT
- frontend
- JavaScript
- type
- Download
- npm
- 프론트엔드
- 프론트엔드개발
- antd
- react
Archives
- Today
- Total
목록fadedown (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