CSS 애니메이션

CSS animations
CSS 애니메이션
CSS 애니메이션 레벨 1
Contra-zoom aka dolly zoom animation.svg
호버 효과를 사용한 인터랙티브 SVG
줄임말CSS-Animations-1
네이티브 네임
CSS 애니메이션
상황W3C 작업 초안
초판2009년 3월 20일 (2009-03-20)[1]
최신 버전레벨 1
2018년 10월 11일(2018-10-11)[2]
프리뷰 버전에디터 초안
[3]
조직월드 와이드 웹 컨소시엄
위원회.CSS 작업 그룹
에디터
  • 딘 잭슨
  • L. 데이비드 배런
  • 탭 앳킨스 주니어
  • 브라이언 버틀스
  • 데이비드 하얏트
  • 크리스 마린
  • 실뱅 갈리노
[2]
기본 규격CSS
도메인CSS
웹 사이트www.w3.org/TR/css-animations-1/
캐스케이드 스타일 시트
개념
철학
도구들
비교

CSS 애니메이션은 CSS를 사용한HTML 문서 요소의 애니메이션을 가능하게 하는 캐스케이드 스타일시트의 제안 모듈입니다.

역사

의사 클래스는:hover는 몇 년 동안 기본적인 애니메이션을 만드는 데 사용되어 왔지만 2000년대 후반까지 애니메이션 분야로의 CSS 확장은 미미했다.2007년 초에 WebKit은 CSS 애니메이션, 트랜지션 및 트랜스포머를 WebKit의 기능으로 포함시킬 의도를 발표했습니다.또한 2009년 2월에 CSS를 통해 암묵적 애니메이션과 명시적 애니메이션의 구현을 발표했다.CSS 애니메이션은 World Wide Web Consortium(W3C)이 관리하고 있는 현행 사양 초안인 CSS3의 기능으로 제공되고 있습니다.

현재의

CSS 애니메이션은 캐스케이드 스타일 시트의 모듈입니다.사용자가 객체 위로 마우스를 이동하면 애니메이션이 재생됩니다.현재, 그것은 모든 주요 검색 엔진에 채택되어 있다.Javascript를 통한 애니메이션을 선호하는 사람들의 논란에도 불구하고, 호버 태그는 현재 Cascading Style Sheets 커뮤니티에서 널리 사용되고 있습니다.

스케일러블 벡터 그래픽스

CSS 3을 사용한 SVG 애니메이션
주요 기사 : SVG 애니메이션 sv CSS를 이용한 SVG 애니메이션

Scalable Vector Graphics는 호버 외에도 @keyframes at-rule을 지원하므로 제한된 변환 세트를 애니메이션화할 수 있습니다.Firefox와 Chrome은 각각 @-moz-keyframes와 @-webkit-keyframes 확장을 사용하여 @keyframes가 [2]CSS 3 사양에 추가되었습니다.

브라우저 지원

2011년 6월 현재 Firefox 5는 [4]CSS 애니메이션을 지원하고 있습니다.CSS 애니메이션은 Google Chrome, Safari 4 및 5 및 Safari for iOS(iPhone, iPod Touch, iPad), Android 버전 2.x 및 3.x, Internet Explorer 10+ 및 Microsoft Edge 브라우저(BlackBerry OS 6 웹 브라우저)의 야간 빌드에서 모듈로도 사용할 수 있습니다.-webkit-프레픽스[5][6][7]iTunes 9에서도 iTunes LP 파일을 지원하는 데 사용됩니다.

논란

초기에 전투 근무 지원 애니메이션의 발전에 누가 JavaScript[8]로 애니메이션을 더 좋아한다는에서 및 사용 범위, 동기화 멀티 미디어 통합 언어(SMIL)에, 다른 사람들은 애플의 웹 키트 프로젝트의 주된 스폰서에 따르는 것으로 어도비 플래시의 개입은(과 incum을 비켜 가기 위해 주장했다 우려를 불렀다.벤t플래시 애니메이션)은 [9][10][11]Safari를 사용하는 모바일 디바이스의 iOS 제품군에 있습니다.게다가, Cascading Style Sheets는 비교적 사용하기 쉬운 프로그래밍 언어이지만, 많은 프로그래머들은 여전히 애니메이션을 만드는 데 어려움을 겪고 있다.이 문제를 해결하기 위해 여러 개인과 웹사이트에서 사용자가 복사할 수 있는 코드를 가진[12] 오픈소스 CSS 버튼 애니메이션을 개발 및 만들었습니다.그러나, 이러한 이전 논란에도 불구하고, CSS 애니메이션은 주로 인터넷에서 발견되고 널리 사용될 수 있습니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "CSS Animations Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-09.
  2. ^ a b c Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (2018-10-11). "CSS Animations Level 1". W3C. CSS Working Group. Retrieved 2021-04-09.
  3. ^ Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (2021-01-27). "CSS Animations Level 1". CSS Working Group Editor Drafts. Retrieved 2021-04-09.
  4. ^ Mozilla Firefox Release Notes, The Mozilla Foundation, 2011-06-21, archived from the original on 2014-02-12, retrieved 2021-04-09
  5. ^ Hyatt, Dave (2007-10-31), "CSS Animation WebKit", WebKit, Surfin’ Safari, retrieved 2021-04-09
  6. ^ Jackson, Dean (2009-02-05), "CSS Animation WebKit", WebKit, Surfin’ Safari, retrieved 2021-04-09
  7. ^ "@keyframes rule (Internet Explorer)", Microsoft Docs, Microsoft, 2018-11-25, archived from the original on 2018-11-26, retrieved 2021-04-09
  8. ^ Snook, Jonathan (2007-10-31), CSS Animations in Safari, Snook.ca, archived from the original on 2021-01-27, retrieved 2021-04-09
  9. ^ Kim, Arnold (2009-02-06), CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?, MacRumors.com, retrieved 2021-04-09
  10. ^ Palmer, Robert (2009-02-06), CSS Animation to replace need for Flash in MobileSafari? Not likely, The Unofficial Apple Weblog, retrieved 2021-04-09
  11. ^ Ferrari, Vincent (2009-02-09), CSS Animations: A Flash Substitute?, Apple Thoughts, retrieved 2021-04-09
  12. ^ ButtonAnimations (2019-12-11). "Button Animations CSS (w/ code)". ButtonAnimations. Retrieved 2021-04-09.

외부 링크

Stub icon

이 커뮤니케이션 설계 관련 기사는 stub입니다.위키피디아를 확장함으로써 위키피디아를 도울 수 있습니다.