1. CSS animation 사용하기 with React

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN

이걸 보고 자꾸 실패했다.

 

왜? 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%;
          }
        }

결과