20일차 TIL 220528

1. CS스터디

 

소프트웨어, 알고리즘에 관해서

https://tjddn8195.tistory.com/manage/posts/

TISTORY

 

2. React

keyframes

 

keyframes는 styled-components안에 이미 들어있습니다.

 

웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용합니다.

 

transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋습니다.

Keyframes은 animation에서 사용하는 속성 중 하나랍니다!

 

const Box = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: green;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${boxFade} 2s 1s infinite linear alternate;
`;

const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;

  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
`;

animation 지속시간이나 효과 등을 후미에 적으면 됩니다.

 

 

window.scrollTo(xpos, ypos, behavior: "option")

 

x, y포지션으로 option효과를 통해 이동하는 애니매이션입니다.

 

option에는 auto(기본), instant(바로), smooth(부드럽게)가 있습니다.