맨위로가기

CSS 애니메이션

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

CSS 애니메이션은 캐스케이딩 스타일 시트(CSS)의 한 모듈로, 웹 페이지 요소에 애니메이션 효과를 부여하는 기술이다. 2000년대 후반부터 CSS의 애니메이션 기능이 발전하기 시작하여, 웹킷을 통해 CSS 애니메이션, 전환 및 변형이 도입되었고, W3C의 CSS3 사양에 포함되었다. 현재 주요 웹 브라우저에서 지원되며, 마우스 오버 등의 동작에 반응하여 애니메이션을 재생할 수 있다. CSS 애니메이션은 자바스크립트를 이용한 애니메이션 방식과의 경쟁, 구현의 어려움, 애플의 플래시 배제 시도 논란 등과 같은 논란이 있었지만, 널리 사용되고 있다.

더 읽어볼만한 페이지

  • CSS - X11 색 이름
    X11 색 이름은 X 윈도 시스템에서 사용되는 색상 체계로, 웹 브라우저에서 널리 사용되는 색상 표준이며, HTML 색상 정의와 차이를 보이고, 최근 릴리스에서는 W3C 정의도 지원한다.
  • CSS - 조건부 주석
    조건부 주석은 특정 조건에 따라 웹 브라우저가 HTML 코드 해석을 제어하는 주석으로, 주로 특정 버전의 Internet Explorer에서만 코드를 실행하기 위해 사용되며, 다운레벨 숨김 및 노출 유형으로 나뉜다.
  • 애니메이션 기법 - 리미티드 애니메이션
    리미티드 애니메이션은 예산과 시간을 절약하기 위해 제한된 움직임과 단순화된 그림 스타일을 특징으로 하는 애니메이션 기법이며, 코마우치, 부위 애니메이션, 싱크로 복스 등의 기법이 활용되어 일본 애니메이션의 독특한 스타일을 구축하는 데 기여했다.
  • 애니메이션 기법 - 키 프레임
    키 프레임은 영상 편집, 애니메이션, 3D 그래픽에서 사용되는 개념으로, 특정 시점의 매개변수 값을 정의하여 부드러운 변화를 만들거나, 영상 압축 시 완전한 이미지를 저장하는 프레임을 의미한다.
  • 애플의 소프트웨어 - 아이튠즈
    아이튠즈는 애플이 개발한 멀티미디어 플랫폼이자 디지털 미디어 플레이어 소프트웨어로, 초기에는 음악 재생 및 관리에 집중했으나 이후 기능이 확장되어 macOS Catalina부터는 개별 앱으로 기능이 분리되었고 윈도우에서는 'Apple 기기' 앱에 관련 기능이 통합되었다.
  • 애플의 소프트웨어 - 사파리 (웹 브라우저)
    사파리는 애플이 개발한 웹 브라우저로, 2003년 처음 출시되어 웹킷 엔진을 기반으로 빠른 속도와 웹 표준 지원을 제공하며, macOS, iOS, iPadOS 등에서 기본 브라우저로 사용된다.
CSS 애니메이션
개요
대조 줌 일명 달리 줌 애니메이션을 사용하는 [[마우스 과녁 (커서)|hover]] 효과
Contra-zoom_aka_dolly_zoom_animation.svg 대조 줌 일명 달리 줌 애니메이션을 사용하는 hover 효과
일반 정보
명칭CSS 애니메이션
원래 명칭CSS Animations
언어영어
상세 정보
상태W3C 작업 초안
최초 게시일2009년 3월 20일
버전레벨 1
버전 날짜2023년 3월 2일
미리보기레벨 2
미리보기 날짜2023년 3월 2일
조직World Wide Web Consortium
위원회CSS Working Group
편집자Dean Jackson
L. David Baron
Tab Atkins Jr.
Brian Birtles
David Hyatt
Chris Marrin
Sylvain Galineau
기반 표준CSS
약칭CSS-ANIMATIONS-1
도메인CSS
웹사이트CSS 애니메이션 레벨 1

2. 역사

`:hover` 의사 클래스는 수년 동안 초보적인 애니메이션을 생성하는 데 사용되었지만, 2000년대 후반까지 CSS의 애니메이션 영역으로의 확장은 미미했다.[1] 2007년 웹킷은 CSS 애니메이션, 전환 및 변형을 웹킷의 기능으로 포함하겠다고 발표했으며, 2009년 2월 CSS를 통해 암시적 애니메이션과 명시적 애니메이션을 모두 구현한다고 발표했다.[1] CSS 애니메이션은 W3C(World Wide Web Consortium)에서 관리하는 현재 초안 사양인 CSS3의 기능으로도 제시되었다.[1]

2. 1. 초기 발전

의사 클래스 `:hover`는 수년 동안 초보적인 애니메이션을 생성하는 데 사용되었지만, 2000년대 후반까지 CSS의 애니메이션 영역으로의 확장은 미미했다.[1] 2007년 웹킷은 CSS 애니메이션, 전환 및 변형을 웹킷의 기능으로 포함하겠다고 발표했다.[1] 또한 2009년 2월 CSS를 통해 암시적 애니메이션과 명시적 애니메이션을 모두 구현한다고 발표했다.[1] CSS 애니메이션은 W3C(World Wide Web Consortium)에서 관리하는 현재 초안 사양인 CSS3의 기능으로도 제시되었다.[1]

2. 2. 웹킷의 선도적인 역할

의사 클래스 `:hover`는 수년 동안 초보적인 애니메이션을 생성하는 데 사용되었지만, 애니메이션 영역으로의 CSS 확장은 2000년대 후반까지 미미했다. 이미 2007년에 웹킷은 CSS 애니메이션, 전환 및 변형을 웹킷의 기능으로 포함하겠다고 발표했다. 또한 2009년 2월 CSS를 통해 암시적 애니메이션과 명시적 애니메이션을 모두 구현한다고 발표했다. CSS 애니메이션은 월드 와이드 웹 컨소시엄(W3C)에서 관리하는 현재 초안 사양인 CSS3의 기능으로도 제시되었다.[1]

2. 3. W3C 표준화

의사 클래스 `:hover`는 수년 동안 초보적인 애니메이션을 생성하는 데 사용되었지만, 애니메이션 영역으로의 CSS 확장은 2000년대 후반까지 미미했다. 2007년에 웹킷은 CSS 애니메이션, 전환 및 변형을 웹킷의 기능으로 포함하겠다고 발표했다.[1] 2009년 2월에는 CSS를 통해 암시적 애니메이션과 명시적 애니메이션을 모두 구현한다고 발표했다.[1] CSS 애니메이션은 W3C(World Wide Web Consortium)에서 관리하는 현재 초안 사양인 CSS3의 기능으로도 제시되었다.[1]

3. 현재 동향

CSS 애니메이션은 사용자가 객체 위에 마우스를 올리면 애니메이션이 재생되도록 하는 기능이다. 현재 모든 주요 검색 엔진에서 채택하고 있다. 자바스크립트를 통한 애니메이션을 선호하는 사람들의 논란에도 불구하고, 호버 태그는 캐스케이딩 스타일 시트 커뮤니티에서 널리 사용되고 있다.[4]

3. 1. 주요 브라우저 지원

CSS 애니메이션은 캐스케이딩 스타일 시트(Cascading Style Sheets)의 모듈이다. 사용자가 객체 위에 마우스를 올리면 애니메이션이 재생되도록 한다. 현재 모든 주요 검색 엔진에서 채택하고 있다.

2011년 6월 현재, 파이어폭스 5는 CSS 애니메이션을 지원한다.[4] CSS 애니메이션은 구글 크롬, 사파리 4 및 5, iOS용 사파리(아이폰, 아이팟 터치, 아이패드), 안드로이드 버전 2.x 및 3.x, 인터넷 익스플로러 10 이상 및 마이크로소프트 엣지 브라우저, 블랙베리 OS 6 웹 브라우저의 야간 빌드 웹킷에서도 `-webkit-` 접두사를 사용하여 사용할 수 있다.[5][6][7] 또한 아이튠즈 9에서 아이튠즈 LP 파일을 지원하는 데 사용된다.

3. 2. SVG 애니메이션과의 연관성

SVG는 ''마우스 오버'' 외에도 제한된 변환 세트를 애니메이션할 수 있는 ''@keyframes'' 규칙을 지원한다. Firefox와 Chrome은 ''@keyframes''가 CSS 3 사양에 추가되기 전에 각각 ''@-moz-keyframes'' 및 ''@-webkit-keyframes'' 확장을 사용했다.[2]

CSS 3를 사용한 SVG 애니메이션

4. 논란과 비판

CSS 애니메이션 개발 초기에는 자바스크립트[8]를 이용한 애니메이션을 선호하는 사람들과 SMIL을 선호하는 사람들 사이에서 우려가 제기되었다. 다른 한편에서는 애플이 iOS 기기에서 어도비 플래시를 배제하기 위한 시도라는 주장도 있었다. 이 기기들은 사파리를 사용한다.[9][10][11] CSS는 비교적 사용하기 쉬운 언어임에도 불구하고, 애니메이션 제작에 어려움을 겪는 프로그래머들이 많았다. 이 문제를 해결하기 위해 오픈 소스 CSS 버튼 애니메이션 코드가 개발되기도 했다.[12] 이러한 논란에도 불구하고 CSS 애니메이션은 현재 인터넷에서 널리 사용되고 있다.

4. 1. 자바스크립트와의 경쟁

CSS 애니메이션 개발 초기에는 자바스크립트[8]를 통한 애니메이션을 선호하는 사람들과 덜 사용되는 SMIL을 선호하는 사람들 사이에서 우려가 제기되었다. 다른 사람들은 이는 WebKit 프로젝트의 주요 후원자인 애플이 자사의 iOS 모바일 기기 라인에서 어도비 플래시(및 기존의 플래시 애니메이션)를 배제하기 위한 시도라고 주장했다. 이 기기들은 사파리를 사용한다.[9][10][11] CSS는 비교적 사용하기 쉬운 프로그래밍 언어임에도 불구하고, 많은 프로그래머들이 여전히 애니메이션 제작에 어려움을 겪고 있다. 이러한 문제를 해결하기 위해, 여러 개인 및 웹사이트에서 사용자들이 복사할 수 있도록 오픈 소스 CSS 버튼 애니메이션 코드를 개발하고 만들었다.[12] 그러나, 이러한 논란에도 불구하고 CSS 애니메이션은 인터넷에서 널리 사용되고 있다.

4. 2. 애플의 플래시 배제 논란

CSS 애니메이션 개발 초기에는 자바스크립트[8]를 통한 애니메이션을 선호하는 사람들과 덜 사용되는 SMIL을 선호하는 사람들 사이에서 우려가 제기되었다. 다른 사람들은 이것이 WebKit 프로젝트의 주요 후원자인 애플이 자사의 iOS 모바일 기기 라인에서 어도비 플래시(및 기존의 플래시 애니메이션)를 배제하기 위한 시도라고 주장했다. 이 기기들은 사파리를 사용한다.[9][10][11]

4. 3. 구현의 어려움

CSS 애니메이션 개발 초기에는 자바스크립트[8]를 통한 애니메이션을 선호하는 사람들과 덜 사용되는 SMIL을 선호하는 사람들 사이에서 우려가 제기되었다. 다른 사람들은 이는 WebKit 프로젝트의 주요 후원자인 애플이 자사의 iOS 모바일 기기 라인에서 어도비 플래시(및 기존의 플래시 애니메이션)를 배제하기 위한 시도라고 주장했다. 이 기기들은 사파리를 사용한다.[9][10][11] 게다가, CSS는 비교적 사용하기 쉬운 프로그래밍 언어임에도 불구하고, 많은 프로그래머들이 여전히 애니메이션 제작에 어려움을 겪고 있다. 이러한 문제를 해결하기 위해, 여러 개인 및 웹사이트에서 사용자들이 복사할 수 있도록 오픈 소스 CSS 버튼 애니메이션 코드를 개발하고 만들었다.[12]

5. 한국 웹 환경에의 영향

(이전 출력이 비어있으므로, 수정할 내용이 없습니다. 원본 소스와 요약 정보가 제공되어야 출력이 가능합니다.)

참조

[1] 웹사이트 CSS Animations Level 1 Publication History - W3C https://www.w3.org/s[...] null
[2] 웹사이트 CSS Animations Level 1 CSS Working Group 2023-03-02
[3] 웹사이트 CSS Animations Level 2 https://www.w3.org/T[...] 2023-03-02
[4] 간행물 Mozilla Firefox Release Notes https://www.mozilla.[...] The Mozilla Foundation 2011-06-21
[5] 간행물 CSS Animation {{!}} WebKit http://webkit.org/bl[...] Surfin’ Safari 2007-10-31
[6] 간행물 CSS Animation {{!}} WebKit http://webkit.org/bl[...] Surfin’ Safari 2009-02-05
[7] 간행물 "@keyframes rule (Internet Explorer)" https://msdn.microso[...] Microsoft 2018-11-25
[8] 간행물 CSS Animations in Safari http://snook.ca/arch[...] Snook.ca 2007-10-31
[9] 간행물 CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? http://www.macrumors[...] MacRumors.com 2009-02-06
[10] 간행물 CSS Animation to replace need for Flash in MobileSafari? Not likely http://www.tuaw.com/[...] The Unofficial Apple Weblog 2009-02-06
[11] 간행물 CSS Animations: A Flash Substitute? http://www.applethou[...] Apple Thoughts 2009-02-09
[12] 웹사이트 Button Animations CSS (w/ code) https://buttonanimat[...] 2019-12-11


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com