CSS Animation

CSS 애니메이션 자체는 쉽다.

 

 

 

p {
  animation-duration: 3s;
  animation-name: 사용할 애니메이션이름;
}

@keyframes 애니메이션이름 {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

 

 

@-webkit-keyframes 애니메이션이름 {
  0% {
    left:100px;
  }
  100% {
    left:300px;
  }
}

이런 식으로 %별로 위치나 크기를 지정할 수 있다.

 

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

 

 

animation-iteration-count: infinite; 를 사용하면 애니메이션이 무한 반복된다.

 

참고 자료

 

https://angelplayer.tistory.com/507

[HTML/CSS] 움직이는 Gradients 배경 적용하기

 

 

https://www.youtube.com/watch?v=YDCCauu4lIk&t=36s

 

https://studiomeal.com/archives/category/1mincoding

웹페이지 가로 모드/세로 모드 인식하기