[CSS] 애니메이션 표현

전예원·2021년 9월 17일
0

HTML, CSS 공부

목록 보기
12/18
post-custom-banner

💡 CSS를 이용해 애니메이션 표현하기

🔴 animation 속성의 종류

  • animation-name : 애니메이션 이름 지정
    ex)aa
  • animation-delay : 애니메이션 효과에 대한 지연시간 지정
    ex) 1s > 1초후 시작
  • animation-direction : 애니메이션 동작이 시작되는 뱡향 설정
    • normal 기본값, 시작~끝
    • alternate from <---> to 반복
    • reverse 역방향 움직임
    • alternate-reverse 역방향 움직인 후 정방향 움직임
  • animation-duration : 애니메이션 실행 시간 지정
    ex) 1s > 1초
  • animation-iteration-count : 애니메이션 효과의 반복 설정
    • 숫자값 = 횟수반복
    • infinite = 무한반복
  • animation-timing-function : 애니메이션 이징 효과 / 이징=시간당 움직이는 속도의 양 값
    • linear : 시작과 끝까지 같은속도 / 일정한 속도로 진행
    • ease : 기본값. / 처음에는 천천히 시작 ~ 점점 속도 ~ 마지막에 천천히 끝
    • ease-in : 속도의 시작을 느리게.
    • ease-out : 속도를 느리게 끝.
    • ease-in-out : 느리게 시작하고, 느리게 끝
  • animation-play-state : 애니메이션 효과의 재생 혹은 중지.
    • paused : 애니메이션을 중지

🟠 cubic-bezier

  • cubic-bezier(n,n,n,n) 사용자 정의에 따라 그래프의 4개의 구간을 변형가능
  • 위에 링크된 사이트에서 테스트해볼 수 있다. 아님 개발자도구를 이용해서 확인해 볼 수도 있다.

🟡 animation-fill-mode

  • 애니메이션이 끝난 후의 상태를 설정
    • none : 애니메이션이 끝난 후 상태를 설정하지 않음
    • forwards 애니메이션이 키프레임의 100%에 도달했을 때 마지막 키프레임을 유지
    • backwards 애니메이션의 스타일을 애니메이션이 실제로 시작되기 전에 미리 적용
    • both forwards + backwards 둘다 적용

🟢 애니메이션 속성

: 동적인 다양한 스타일 전환을 표현하기 위해 사용하는 속성 ( 부드럽게 스타일 변화 )

  • animation을 위해 함께 사용 = @keyframes(키프레임)
    • 키프레임 내에 특정한 시간에 따라 표현해야할 요소의 스타일을 표기 : 애니매이션이 변경되는 지점 설정
@keyframes 이름 {
0%{ 시작스타일을 표기 }
100%{ 끝스타일을 표기 }
}

🔵 움직이는 글자 애니메이션 만들기

⭐️ 미리보기 샷

<div id="main">
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. Contrary to popular belief</p>
</div>
<style type="text/css">
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
 *{padding: 0; margin: 0; font-family: 'Montserrat', sans-serif;}

 #main {
  width: 30%;
  height: 500px;
  border: 1px solid #ccc;
  color: #50468b;
  overflow: hidden;
  margin: 100px auto;
  position: relative;
 }
 p {
  width: 1000px;
  position: absolute;
  font-size: 50px;
  left: -1000px;
  animation: obj 8s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
  animation-fill-mode: both;
}

 @keyframes obj {
  0% {
    left: -500px;
  }
  100% {
    left: 1000px;
  }
}
</style>

✏️ 애니메이션 속성 참고하기 좋은 블로그 추천

profile
앞으로 나아가는 중~
post-custom-banner

0개의 댓글