작은숲:위키노트/CSS 애니메이션 - 편집 역사

Utolee90: Utolee90님이 CSS 애니메이션 문서를 작은숲:위키노트/CSS 애니메이션 문서로 이동했습니다: 제목 변경

2022-05-07T05:51:30Z

Utolee90님이 CSS 애니메이션 문서를 작은숲:위키노트/CSS 애니메이션 문서로 이동했습니다: 제목 변경

← 이전 판	2022년 5월 7일 (토) 14:51 판
(차이 없음)

Utolee90: /* top */move articles, replaced: 웹 브라우저 → 웹 브라우저 (6)

2022-05-07T04:21:56Z

top: move articles, replaced: 웹 브라우저 → 웹 브라우저 (6)

← 이전 판		2022년 5월 7일 (토) 13:21 판
1번째 줄:		1번째 줄:
	[[위키노트:웹 브라우저\|웹 브라우저]]들이 CSS3를 지원하면서 [[위키노트:자바스크립트\|자바스크립트]]를 쓰지 않고 [[위키노트:CSS\|CSS]]만으로 애니메이션 효과를 줄 수 있다. 지금은 모든 최신 브라우저들이 CSS3 애니메이션을 지원하고 [[위키노트:인터넷 익스플로러\|인터넷 익스플로러]]의 경우 버전 10부터 지원한다.		[[작은숲:위키노트/웹 브라우저\|웹 브라우저]]들이 CSS3를 지원하면서 [[작은숲:위키노트/자바스크립트\|자바스크립트]]를 쓰지 않고 [[작은숲:위키노트/CSS\|CSS]]만으로 애니메이션 효과를 줄 수 있다. 지금은 모든 최신 브라우저들이 CSS3 애니메이션을 지원하고 [[작은숲:위키노트/인터넷 익스플로러\|인터넷 익스플로러]]의 경우 버전 10부터 지원한다.
	CSS 애니메이션은 아래에 나온 속성들과 <code>@keyframes</code> 룰을 통해 구현된다.		CSS 애니메이션은 아래에 나온 속성들과 <code>@keyframes</code> 룰을 통해 구현된다.
	{\| class="wikitable bordered td-top"		{\| class="wikitable bordered td-top"
33번째 줄:		33번째 줄:
	}</syntaxhighlight>		}</syntaxhighlight>
	위 코드는 <tt>animated</tt> 클래스가 주어진 요소를 2초 동안 기다린 후 4초 동안 <tt>sample</tt> 애니메이션을 적용하라는 것이다. <tt>sample</tt> 애니메이션은 시작할 때(0%)는 배경색이 녹색이었다가 2초가 될 때까지(50%) 천천히 파란색으로 바뀌고, 다시 4초가 될 때까지(100%) 빨간색으로 바뀌는 것이다.		위 코드는 <tt>animated</tt> 클래스가 주어진 요소를 2초 동안 기다린 후 4초 동안 <tt>sample</tt> 애니메이션을 적용하라는 것이다. <tt>sample</tt> 애니메이션은 시작할 때(0%)는 배경색이 녹색이었다가 2초가 될 때까지(50%) 천천히 파란색으로 바뀌고, 다시 4초가 될 때까지(100%) 빨간색으로 바뀌는 것이다.
	<code>@keyframes</code> 룰에는 모든 [[위키노트:CSS\|CSS]] 속성이 들어갈 수 있으니 잘 조합하면 [[위키노트:자바스크립트\|자바스크립트]]로 구현한 애니메이션 못지 않게 만들 수 있다.		<code>@keyframes</code> 룰에는 모든 [[작은숲:위키노트/CSS\|CSS]] 속성이 들어갈 수 있으니 잘 조합하면 [[작은숲:위키노트/자바스크립트\|자바스크립트]]로 구현한 애니메이션 못지 않게 만들 수 있다.
	== 참고 ==		== 참고 ==
	* {{언어\|영어}} [http://devdocs.io/css/animation DevDocs: CSS Animation]		* {{언어\|영어}} [http://devdocs.io/css/animation DevDocs: CSS Animation]

Utolee90: 문자열 찾아 바꾸기 - "" 문자열을 "" 문자열로

2021-03-28T03:52:50Z

문자열 찾아 바꾸기 - "</source>" 문자열을 "</syntaxhighlight>" 문자열로

← 이전 판		2021년 3월 28일 (일) 12:52 판
31번째 줄:		31번째 줄:
	animation-duration: 4s;		animation-duration: 4s;
	animation-delay: 2s;		animation-delay: 2s;
	}</~~source~~>		}</syntaxhighlight>
	위 코드는 <tt>animated</tt> 클래스가 주어진 요소를 2초 동안 기다린 후 4초 동안 <tt>sample</tt> 애니메이션을 적용하라는 것이다. <tt>sample</tt> 애니메이션은 시작할 때(0%)는 배경색이 녹색이었다가 2초가 될 때까지(50%) 천천히 파란색으로 바뀌고, 다시 4초가 될 때까지(100%) 빨간색으로 바뀌는 것이다.		위 코드는 <tt>animated</tt> 클래스가 주어진 요소를 2초 동안 기다린 후 4초 동안 <tt>sample</tt> 애니메이션을 적용하라는 것이다. <tt>sample</tt> 애니메이션은 시작할 때(0%)는 배경색이 녹색이었다가 2초가 될 때까지(50%) 천천히 파란색으로 바뀌고, 다시 4초가 될 때까지(100%) 빨간색으로 바뀌는 것이다.
	<code>@keyframes</code> 룰에는 모든 [[위키노트:CSS\|CSS]] 속성이 들어갈 수 있으니 잘 조합하면 [[위키노트:자바스크립트\|자바스크립트]]로 구현한 애니메이션 못지 않게 만들 수 있다.		<code>@keyframes</code> 룰에는 모든 [[위키노트:CSS\|CSS]] 속성이 들어갈 수 있으니 잘 조합하면 [[위키노트:자바스크립트\|자바스크립트]]로 구현한 애니메이션 못지 않게 만들 수 있다.

Utolee90: 문자열 찾아 바꾸기 - "
2021-03-28T03:51:09Z

문자열 찾아 바꾸기 - "<source" 문자열을 "<syntaxhighlight" 문자열로

← 이전 판 2021년 3월 28일 (일) 12:51 판
22번째 줄: 22번째 줄:

| <tt>animation-play-state</tt> || 애니메이션을 진행할 것인지 중지할 것인지 지정 (<tt>running</tt>, <tt>paused</tt>; 기본값 <tt>running</tt>)
| <tt>animation-play-state</tt> || 애니메이션을 진행할 것인지 중지할 것인지 지정 (<tt>running</tt>, <tt>paused</tt>; 기본값 <tt>running</tt>)

|}
|}

<source lang="css">
<syntaxhighlight lang="css">

@keyframes sample {
@keyframes sample {

0% { background-color: green; }
0% { background-color: green; }

Utolee90: 문자열 찾아 바꾸기 - "분류:공유" 문자열을 "분류:위키노트/공유" 문자열로

2021-03-28T03:17:37Z

문자열 찾아 바꾸기 - "분류:공유" 문자열을 "분류:위키노트/공유" 문자열로

← 이전 판		2021년 3월 28일 (일) 12:17 판
38번째 줄:		38번째 줄:
	* {{언어\|영어}} [http://devdocs.io/css/@keyframes DevDocs: CSS @keyframes]		* {{언어\|영어}} [http://devdocs.io/css/@keyframes DevDocs: CSS @keyframes]
	* {{언어\|영어}} [http://www.w3schools.com/css/css3_animations.asp W3Schools: CSS3 Animations]		* {{언어\|영어}} [http://www.w3schools.com/css/css3_animations.asp W3Schools: CSS3 Animations]
	[[분류:공유]]		[[분류:위키노트/공유]]
	[[분류:CSS]]{{퍼온문서\|위키노트\|{{#invoke:string\|replace\|{{PAGENAME}}\|위키노트:\|}}}}[[분류:위키노트에서 가져온 문서]]		[[분류:CSS]]{{퍼온문서\|위키노트\|{{#invoke:string\|replace\|{{PAGENAME}}\|위키노트:\|}}}}[[분류:위키노트에서 가져온 문서]]

Utolee90: Utolee90님이 위키노트:CSS 애니메이션 문서를 CSS 애니메이션 문서로 이동했습니다: Move_Pages_by_removing_the_text_위키노트_via_pywikibot

2017-07-02T08:48:51Z

Utolee90님이 위키노트:CSS 애니메이션 문서를 CSS 애니메이션 문서로 이동했습니다: Move_Pages_by_removing_the_text_위키노트_via_pywikibot

← 이전 판	2017년 7월 2일 (일) 17:48 판
(차이 없음)

Utolee90: 문자열 찾아 바꾸기 - "{{퍼온문서|위키노트|{{#invoke:string|replace|위키노트:|}}}}분류:위키노트에서 가져온 문서" 문자열을 "{{퍼온문서|위키노트|{{#invoke:string|replace|{{PAGENAME}}|위키노트:|}}}}분류:위키노트에서 가져온 문서" 문자열로

2017-03-01T15:35:14Z

문자열 찾아 바꾸기 - "{{퍼온문서|위키노트|{{#invoke:string|replace|위키노트:|}}}}분류:위키노트에서 가져온 문서" 문자열을 "{{퍼온문서|위키노트|{{#invoke:string|replace|{{PAGENAME}}|위키노트:|}}}}분류:위키노트에서 가져온 문서" 문자열로

← 이전 판		2017년 3월 2일 (목) 00:35 판
39번째 줄:		39번째 줄:
	* {{언어\|영어}} [http://www.w3schools.com/css/css3_animations.asp W3Schools: CSS3 Animations]		* {{언어\|영어}} [http://www.w3schools.com/css/css3_animations.asp W3Schools: CSS3 Animations]
	[[분류:공유]]		[[분류:공유]]
	[[분류:CSS]]{{퍼온문서\|위키노트\|{{#invoke:string\|replace\|위키노트:\|}}}}[[분류:위키노트에서 가져온 문서]]		[[분류:CSS]]{{퍼온문서\|위키노트\|{{#invoke:string\|replace\|{{PAGENAME}}\|위키노트:\|}}}}[[분류:위키노트에서 가져온 문서]]

Utolee90: 문자열 찾아 바꾸기 - "분류:위키노트에서 가져온 문서" 문자열을 "{{퍼온문서|위키노트|{{#invoke:string|replace|위키노트:|}}}}분류:위키노트에서 가져온 문서" 문자열로

2017-03-01T15:28:18Z

문자열 찾아 바꾸기 - "분류:위키노트에서 가져온 문서" 문자열을 "{{퍼온문서|위키노트|{{#invoke:string|replace|위키노트:|}}}}분류:위키노트에서 가져온 문서" 문자열로

← 이전 판		2017년 3월 2일 (목) 00:28 판
39번째 줄:		39번째 줄:
	* {{언어\|영어}} [http://www.w3schools.com/css/css3_animations.asp W3Schools: CSS3 Animations]		* {{언어\|영어}} [http://www.w3schools.com/css/css3_animations.asp W3Schools: CSS3 Animations]
	[[분류:공유]]		[[분류:공유]]
	[[분류:CSS]][[분류:위키노트에서 가져온 문서]]		[[분류:CSS]]{{퍼온문서\|위키노트\|{{#invoke:string\|replace\|위키노트:\|}}}}[[분류:위키노트에서 가져온 문서]]

Utolee90: 판 1개를 가져왔습니다: 자유위키의 위키노트 데이터 가져옴

2017-03-01T14:51:17Z

판 1개를 가져왔습니다: 자유위키의 위키노트 데이터 가져옴

← 이전 판	2017년 3월 1일 (수) 23:51 판
(차이 없음)

Utolee90: 판 1개를 가져왔습니다: 위키노트(http://wiki.mooo.org/)에서 가져옴

2016-11-09T17:12:29Z

판 1개를 가져왔습니다: 위키노트(http://wiki.mooo.org/)에서 가져옴

새 문서

[[위키노트:웹 브라우저|웹 브라우저]]들이 CSS3를 지원하면서 [[위키노트:자바스크립트|자바스크립트]]를 쓰지 않고 [[위키노트:CSS|CSS]]만으로 애니메이션 효과를 줄 수 있다. 지금은 모든 최신 브라우저들이 CSS3 애니메이션을 지원하고 [[위키노트:인터넷 익스플로러|인터넷 익스플로러]]의 경우 버전 10부터 지원한다.
CSS 애니메이션은 아래에 나온 속성들과 <code>@keyframes</code> 룰을 통해 구현된다.
{| class="wikitable bordered td-top"
! style="width:14em;" | 속성 !! 설명
|-
| <tt>animation</tt> || 다음 속성들을 한꺼번에 쓰는 축약형 (<code>animation-name</code>  <code>animation-duration</code>  <code>animation-timing-function</code>  <code>animation-delay</code>  <code>animation-iteration-count</code>  <code>animation-direction</code>)
|-
| <tt>animation-name</tt> || 적용할 <tt>@keyframes</tt> 룰 지정
|-
| <tt>animation-duration</tt> || 한번의 순환을 얼마 동안 할 것인지 지정 (단위: s 초, ms 밀리초)
|-
| <tt>animation-timing-function</tt> || 애니메이션을 진행하는 속도 패턴 지정 (<tt>ease</tt>, <tt>ease-in</tt>, <tt>ease-out</tt>, <tt>ease-in-out</tt>, <tt>step-start</tt>, <tt>step-end</tt>, <tt>steps(int,start/end)</tt>, <tt>cubic-bezier(n,n,n,n)</tt>; 기본값 <tt>ease</tt>)
|-
| <tt>animation-delay</tt> || 애니메이션을 시작할 때까지의 지연 지정 (기본값 0)
|-
| <tt>animation-iteration-count</tt> || 애니메이션 반복 횟수 지정 (기본값 1)
|-
| <tt>animation-direction</tt> || 애니메이션 진행 방향 지정 (<tt>normal</tt>, <tt>reverse</tt>, <tt>alternate</tt>, <tt>alternate-reverse</tt>; 기본값 <tt>normal</tt>)
|-
| <tt>animation-fill-mode</tt> || 애니메이션이 시작하기 전이나 끝난 후의 스타일 지정 (기본값 <tt>none</tt>)
|-
| <tt>animation-play-state</tt> || 애니메이션을 진행할 것인지 중지할 것인지 지정 (<tt>running</tt>, <tt>paused</tt>; 기본값 <tt>running</tt>)
|}
<source lang="css">
@keyframes sample {
0% { background-color: green; }
50% { background-color: blue; }
100% { background-color: red; }
}.animated {
animation-name: sample;
animation-duration: 4s;
animation-delay: 2s;
}</source>
위 코드는 <tt>animated</tt> 클래스가 주어진 요소를 2초 동안 기다린 후 4초 동안 <tt>sample</tt> 애니메이션을 적용하라는 것이다. <tt>sample</tt> 애니메이션은 시작할 때(0%)는 배경색이 녹색이었다가 2초가 될 때까지(50%) 천천히 파란색으로 바뀌고, 다시 4초가 될 때까지(100%) 빨간색으로 바뀌는 것이다.
<code>@keyframes</code> 룰에는 모든 [[위키노트:CSS|CSS]] 속성이 들어갈 수 있으니 잘 조합하면 [[위키노트:자바스크립트|자바스크립트]]로 구현한 애니메이션 못지 않게 만들 수 있다.
== 참고 ==
* {{언어|영어}} [http://devdocs.io/css/animation DevDocs: CSS Animation]
* {{언어|영어}} [http://devdocs.io/css/@keyframes DevDocs: CSS @keyframes]
* {{언어|영어}} [http://www.w3schools.com/css/css3_animations.asp W3Schools: CSS3 Animations]
[[분류:공유]]
[[분류:CSS]][[분류:위키노트에서 가져온 문서]]

← 이전 판		2021년 3월 28일 (일) 12:51 판
22번째 줄:		22번째 줄:
	\| <tt>animation-play-state</tt> \|\| 애니메이션을 진행할 것인지 중지할 것인지 지정 (<tt>running</tt>, <tt>paused</tt>; 기본값 <tt>running</tt>)		\| <tt>animation-play-state</tt> \|\| 애니메이션을 진행할 것인지 중지할 것인지 지정 (<tt>running</tt>, <tt>paused</tt>; 기본값 <tt>running</tt>)
	\|}		\|}
	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	@keyframes sample {		@keyframes sample {
	0% { background-color: green; }		0% { background-color: green; }