https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
이걸 보고 자꾸 실패했다.
왜? className 으로 지정하지 않았기 때문이었다!!
React 에서, css animation 을 지정하려거든, className 으로 css animation 을 딱! 집어야한다.
애매하게, p 이렇게 하면 안된다.
1. 기본 사용 방법
0. 적용할 className 을 정한다.
1. animation 을 통해, animation 이름을 정하고,
animation : "이름" "지정시간" "방법"
2. @keyframes 애니메이션이름 { } 을 통해, % 별로 어떻게 움직일지 지정한다.
<컴포넌트함수>
<div className={styles.msMoves}> </div>
< 모듈 CSS>
.msMoves{
animation : msSlider 200ms ease-out;
}
@keyframes msSlider{
0% {
margin-left: 100%;
}
50% {
margin-left: 50%;
}
100% {
margin-left: 0%;
}
}
2. 버튼에, bump animation 을 넣고
메인화면에, slide animation 을 넣어보았다.
<버튼>
return (
...
<li className={`${styles.cart} ${styles.bump}`} onClick={toggleModal}>
<버튼 CSS>
.bump {
animation: bump 300ms ease-out;
}
@keyframes bump {
0% {
transform: scale(1);
}
10% {
transform: scale(0.9);
}
30% {
transform: scale(1.1);
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
<메인화면>
function Foods() {
return (
<div className={`${styles.maindiv} ${styles.slide}`}>
<SummuryFood />
<AvaliableFoods />
</div>
);
}
export default Foods;
<메인화면 CSS >
.slide {
animation: slider 200ms ease-out;
}
@keyframes slider {
0% {
margin-left: 100%;
}
50% {
margin-left: 50%;
}
100% {
margin-left: 0%;
}
}
결과
'CSS > 애니메이션' 카테고리의 다른 글
3. infinite 옵션과, from, to 를 이용해 빙빙 돌아가는 할일 만들기 (0) | 2022.12.23 |
---|---|
2. 버튼 누를때마다 animation 동작하게 만들기, with React, useEffect (0) | 2022.12.12 |
댓글