TIL 23.03.17

오늘은 CSS 애니메이션에 대해서 배웠다.

 

@keyframes 라는 키워드를 활용하여 애니메이션 효과를 나타내는데,

 

우선  css 키프레임 블록을 생성한 뒤,

애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 불러와서 사용을 한다.

 

회전하는 키프레임 예시

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */

/*3초 동안 lotate 애니메이션이 재생*/
#logo {
	animation : lotate 3s ;
}

 

 

배운 것을 활용해서 애니메이션을 적용하여 글자를 깜빡거리게 하는 예시를 만들어 보려고 했다.

 

하지만, styled-component 내에서 keyframe을 어떻게 적용할지 몰라서 헤매다가 관련내용을 찾아보았다.

 

 

styled-components에서 style와 keyframes을 불러와 애니메이션 동작과 엘리먼트를 생성해야 했던 것이었다.

 

 

해당 방법을 적용했더니 잘 작동이 되었다.

import styled, { keyframes } from "styled-components";
import "../App.css";
const BREAK_POINT_TABLET = 768;
const BREAK_POINT_PC = 1200;

const lotate = keyframes`
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const MainArea = styled.div`
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQax6rmz_WKtNg2LTxSDYodb3uo_Apj4KcbDQ&usqp=CAU");
  /* background-repeat: repeat; */
  max-height: 864px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 128px 0px 0 0px;

  div.text {
    width: 1200px;
    margin: 0 auto;
    .large_screen {
      display: none;
    }
    .small_screen {
      display: block;
      animation: ${lotate} 1s infinite;
    }
    p {
      position: relative;
      top: 60px;
      width: 100%;
      height: auto;
      color: black;
      font-weight: 600;
      font-size: 60px;
      letter-spacing: 6px;
      line-height: 1.4;
    }
  }

  // 태블릿 : 1200px ~ 768px :: 768px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_TABLET}px) {
    background-image: url("https://item.kakaocdn.net/do/1d495862f49c38232ca8b6cc6a9679a08f324a0b9c48f77dbce3a43bd11ce785");
    background-repeat: no-repeat;
    background-color: skyblue;
    background-position: right;

    div.text {
      p {
        color: white;
      }
      .large_screen {
        display: block;
      }
      .small_screen {
        display: none;
      }
    }
  }
  // PC : 1200px 이상 :: 1200px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {
    background-color: antiquewhite;
  }
`;

const Render = () => {
  return (
    <>
      <MainArea>
        <div className="text">
          <div className="small_screen">
            <p>군침이</p>
            <p>싹</p>
          </div>

          <div className="large_screen">
            <p>작은화면으로</p>
            <p>줄여보세요</p>
          </div>
        </div>
      </MainArea>
    </>
  );
};

export default Render;