[css]애니메이션 적용하기

css를 이용하여 애니메이션을 적용해보았다.

전공 수업 때 애니메이션을 적용해본 적이 없어서 구글링을 통해 쉽게 적용해볼 수 있었다!

---

1. 적용할 div 혹은 p 등 태그에 클래스 or 아이디명 붙여주기

2. css 파일에서 해당 태그에 애니메이션 속성을 달아주기

3. " @keyframe 애니메이션 이름 " 을 통해 애니메이션 시작부터 종료까지의 세부 속성 지정하기
//@keyframe 문법은 애니메이션 시작~종료까지의 세부 동작을 지정하는 css 문법이다! 

ex) 

//css파일에서

.content {

  border-width: medium;

  border-top: 3px solid #364f6b;

  border-bottom: 3px solid #364f6b;

  margin-top: 10em;

  margin-left: 12em;

  margin-right: 12em;

  padding: 0.5em;

  /* 애니메이션 */

  animation-duration: 3s; /* 애니메이션 시간 */

  animation-name: slidein; /* 애니메이션 이름*/

  animation-direction: normal; /* 애니메이션 방향(오->왠) */

}

@keyframes slidein {

  from {

    margin-left: 100%;

  }

  to {

    margin-left: width; /* width로 두면 content의 width까지만 애니메이션이 적용된다.*/

  }

}

animaition에는 다양한 속성들이 있고, 그 안에 프로퍼티들이 있는데, 잘 정리되어 있는 블로그의 글을 참고했다.

참고사이트 : https://ponyozzang.tistory.com/207