React 리액트 - 리액트 style 애니메이션 적용

 
 

keyframes.js

 
 

 
 
- keyframes 폴더로 애니메이션 이펙트 관리
- keyframes > keyframes.js 파일 내에서 이펙트 구현
 
 
<keyframes.js>

import { keyframes } from "styled-components";

export const fadeIn = keyframes`
  0% {
    opacity: 0;
    transform: translate(0, -30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
`

 
 
<style.js>

import styled from "styled-components";
import { flexCenter, flexCenterColumn, flexColumn, h1Bold, h3Regular } from "../../styles/common";
import { height, width } from "@fortawesome/free-solid-svg-icons/fa0";
import { fadeIn } from "../../keyframes/keyframes";
import { media } from "../../styles/breakpoint";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const S = {}

// SnowFlake
  // 이미지 스타일
  S.SnowImg = styled.img`
    width: ${(width) => width}; // props의 width를 width로만 사용 가능
    object-fit: cover;
    border-radius: 8px;
    padding: 20px;
  `;

  // 박스 스타일
  S.SnowImgWrapper = styled.div`
    border: 1px pink;
    ${flexCenterColumn}
  `

  S.SnowWrapper = styled.div`
    width: 800px;
    height: 800px;
    border: solid 1px purple;
    ${flexCenter}
  `;

  S.SnowBg = styled.div`
    width: ${({width}) => width};
    height: ${(height) => height};
    background-image: url("/assets/images/styled/04.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    animation: ${fadeIn} 1s ease-in forwards;
  `

  // Styled04
  S.Title = styled.p`
    ${h1Bold}
    opacity: 0;
    animation: ${fadeIn} 1s ease-in forwards;
    }
  `

  S.SubTitle = styled.p`
    ${h3Regular}
  `

export default S;

 
 
- 기존의 style.js폴더에 정의된 컴포넌트에 애니메이션 추가
- animation: ${fadeIn} 1s ease-in forwards;으로 글씨 및 이미지에 적용 가능
 
 
<결과화면>

 
 
https://developernew.tistory.com/447

React 리액트 - 리액트 style 활용 방법 theme.js

https://developernew.tistory.com/446

React 리액트 - 리액트 style 활용 방법 global.js

https://developernew.tistory.com/444

React 리액트 - 리액트 style 활용 방법 common.js

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법