David.Cheon
UIpac
David.Cheon
  • UIpac (462)
    • 기획·PM (26)
    • UI·UX (30)
    • 콘텐츠·서비스 (15)
    • 마케팅·분석 (15)
    • 경제·경영 (8)
    • 업무자료 (6)
    • 읽을거리 (142)
    • 정보공유 (143)
      • 교육 (24)
      • 인공지능 (19)
      • 모빌리티 (4)
      • ICT동향 (73)
      • 가트너 (12)
      • M-Report (10)
    • 개인공간 (74)
      • 비공개 스크랩 (0)
      • 자기계발 (25)
      • 음악·도서 (9)
      • 영화·공연 (7)
      • 여행·맛집 (3)
      • 프로젝트 (0)
      • 기타 (30)

인기 글

Tags

  • UI
  • 디자인
  • 기획참고
  • 애플리케이션
  • 트랜드
  • 사이트
  • 인공지능
  • 벤치마킹
  • UX
  • 동향
  • 세계 게임시장 규모
  • 모바일
  • 2014
  • 웨어러블
  • Mreport
  • 2015
  • 기획
  • Gartner
  • 사물인터넷
  • Curation
  • 분석
  • 반응형웹
  • 가트너
  • 트렌드
  • 다음카카오
  • daumkakao
  • 디자인참고
  • 유니티
  • 큐레이션
  • trend

최근 댓글

방명록

전체 방문자
오늘
어제
Uipac
David.Cheon

UIpac

UI·UX

애니메이션과 트랜지션의 차이

2014. 9. 22. 08:58
반응형



http://www.kirupa.com/html5/css3_animations_vs_transitions.htm



트랜지션은 CSS 프로퍼티에 의해서만 발생한다.

:hover 같은 슈도 클래스에 의해서이거나, 클래스를 넣고 빼는 등의 동작에 의해서이다.

물론 엘리먼트의 인라인 스타일을 변경해서도 동작하게 할 수 있다.


애니메이션은 시작하기 위해 별도의 설정이 필요없다.

한 번 정의하면 자동으로 시작한다.



애니메이션은 `animation-iteration-count` 속성으로 쉽게 반복할 수 있지만,

트랜지션은 이런 속성이 없다.

트랜지션은 한 번만 발생한다. (필요하다면 스크립트에서 `transitionEnd` 이벤트를 받는다)



애니메이션은 키프레임을 지정할 수 있다.

트랜지션은 할 수 없다.


트랜지션을 활용한 인터랙션.

클릭할 때 ease-in 이 적용된다.

http://www.kirupa.com/snippets/move_element_to_click_position.htm


CSS의 transition 프로퍼티가 특정 속성을 listen 하고 있기 때문에,

자바스크립트에서는 그 값만 수정해도 트랜지션이 적용된다.



출처 : http://ohgyun.com/466

반응형

'UI·UX' 카테고리의 다른 글

세상을 지배하는 색상들..  (0) 2014.12.28
웹사이트 모듈 디자인 가이드  (0) 2014.11.05
인터렉션/트랜지션 디자인 참고 사이트 모음  (0) 2014.07.29
웨어러블 디바이스를 위한 VUI  (0) 2014.07.21
UI/UX 기획에 도움이 되는 사이트  (0) 2014.07.09

    티스토리툴바