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}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자