css transition vs animation

css transition vs animation

  • transition
    • 시작과 끝만 설정함
      • 타이밍 함수를 사용해서 중간의 진행 값을 조절 할 수 있음.
    • 되돌리면 끝에서 시작으로 돌아감
    • 1번만 실행
    • 보통 :hover 등과 같이 액션에 따라 동작시킴
  • animation
    • 시작과 끝 사이를 마음대로 설정 할 수 있음.
      • 복잡한 움직임 가능
    • 무한 반복 가능
    • 자동 실행 가능
    • 앞으로 뒤로 동작 방향 설정 가능

  • 요약
    • 둘은 거의 비슷하게도 사용할 수 있지만 기본적으로는
    • 1. 사용자 반응에 대한 단순 변화는 transition을
    • 2. 복잡한 동작이니 JS없는 자동 동작은 animation을 
    • 사용하면 된다.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
2.10
2.11
2.12
2.13
2.14
2.15
2.16
2.17
2.18
2.19
2.20
2.21
2.22
2.23
2.24
2.25
2.26
2.27
2.28