| 초기 값 | 0초 |
|---|---|
| 에 적용 | 모든 요소, ::before 및 ::after 의사 요소 |
| 상속 | 아니요 |
| 미디어 | 시각적인 |
| 계산된 값 | 지정된 대로 |
| 애니메이션 유형 | 이산 |
| 정식 주문 | 형식 문법에 의해 정의된 고유하고 모호하지 않은 순서 |
브라우저 호환성
이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 https://github.com/mdn/browser-compat-data를 확인하고 풀 리퀘스트를 보내주세요.
GitHub에서 호환성 데이터 업데이트
| 데스크탑 | 이동하는 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 크롬 | 가장자리 | 파이어폭스 | 인터넷 익스플로러 | 오페라 | 원정 여행 | 안드로이드 웹뷰 | 안드로이드용 크롬 | 안드로이드용 파이어폭스 | 안드로이드용 오페라 | iOS의 사파리 | 삼성인터넷 | |
| 애니메이션 지연 | Chrome 전체 지원 43 전체 지원 43 전체 지원 3 접두사 접두사 | 에지 전체 지원 12 | 파이어폭스 전체 지원 16 메모 전폭적인 지원 16메모 메모 파이어폭스 57 이전, 파이어폭스 하지 않습니다지연으로 뷰포트로 애니메이션되는 뷰포트 외부의 요소를 다시 칠합니다. 이 버그는 Windows와 같은 일부 플랫폼에만 영향을 줍니다. 전폭적인 지원 49접두사 접두사 공급업체 접두사로 구현됨: -webkit- 전체 지원 44접두사 장애가 있는 접두사 공급업체 접두사로 구현됨: -webkit- 비활성화됨 버전 44부터: 이 기능은 layout.css.prefixes.webkit 기본 설정 뒤에 있습니다(true로 설정해야 함). Firefox에서 기본 설정을 변경하려면 about:config를 방문하십시오. 전체 지원 5접두사 접두사 공급업체 접두사로 구현됨: -moz- | IE 전체 지원 10 | Opera 전체 지원 30 전체 지원 30 전체 지원 15 접두사 접두사 공급업체 접두사로 구현됨: -webkit- 지원 안 함 12.1 - 15 지원 안함 12 - 15접두사 접두사 공급업체 접두사로 구현됨: -o- | Safari 전체 지원 9 전체 지원 9 전체 지원 4 접두사 접두사 공급업체 접두사로 구현됨: -webkit- | WebView Android 전체 지원 43 전체 지원 43 전체 지원 ≤37 접두사 접두사 공급업체 접두사로 구현됨: -webkit- | Chrome Android 전체 지원 43 전체 지원 43 전체 지원 18 접두사 접두사 공급업체 접두사로 구현됨: -webkit- | Firefox Android 전체 지원 16 전체 지원 16 전체 지원 49 | |||
CSS 애니메이션은 초기화된 직후에 시작할 필요가 없습니다. transition-delay 속성으로 시작하는 시점을 제어할 수 있습니다. 특정 시간 동안 전환을 지연하려면 속성 값에 지정합니다.
전환 지연: 1초; /* 애니메이션 시작을 1초 지연 */
이 속성은 사이트에서 간단한 상호 작용을 구현할 때 거의 사용되지 않지만 더 복잡한 효과를 만들어야 하는 경우에는 매우 유용할 수 있습니다. transition-duration과 유사하게 transition-property에 지정된 각 속성에 대한 지연 시간을 작성할 수 있습니다(열거 순서를 따르는 것도 중요합니다).
전환 속성: 색상, 배경색, 문자 간격; 전환 시간: 1초, 0.5초, 2초 전환 지연: 0초, 0초, 2초 /* 글자 간격 애니메이션을 2초 지연 */
브라우저 간 호환성을 잊지 마십시오 - 절대적으로 가족의 모든 속성 이행공급업체 접두사를 사용해야 합니다.
웹킷 전환 지연: 1초; -moz-전환-지연: 1초; -o-전환-지연: 1초; 전환 지연: 1초;
실용
실제로 transition-delay 속성은 마우스 오버 시 확장되는 드롭다운 메뉴를 만들 때 자주 사용됩니다. 이 경우 초기 상태 뿐만 아니라 최종 상태에 대해서도 작성합니다.
일부 사이트에서는 드롭다운 하위 메뉴가 너무 빨리 사라져서 찾기가 어렵다는 것을 눈치채셨을 것입니다. 원하는 링크그리고 그것을 클릭하십시오. 일반 요소 및 유사 클래스:hover가 있는 요소에 설정된 transition-delay 속성은 이러한 동작을 방지하는 데 도움이 됩니다. 값은 다릅니다. 일반 상태의 경우 transition-delay 속성을 0보다 큰 값으로 설정해야 하며, hover 상태의 경우 0으로 설정해야 합니다. 예:
하위 메뉴(불투명도: 0, 전환 속성: 모두, 전환 기간: .5초, 전환 지연: 1초, ) .menu:hover .submenu( 불투명도: 1, 전환 지연: 0초, )
이 코드는 메뉴가 마우스 오버 시 지연 없이 나타나도록 하며 사라지는 것은 1초 지연됩니다. 이 트릭은 확실히 메뉴를 더 사용자 친화적으로 만들 것입니다.
animation-delay 속성은 애니메이션 루프를 시작하기 전에 대기할 시간을 설정합니다. 0s 또는 0ms 값은 애니메이션을 즉시 시작합니다. 음수 값도 지연 없이 애니메이션을 활성화하지만 애니메이션 시작 모양을 변경할 수 있습니다.
쉼표로 구분하여 나열하여 여러 값을 지정할 수 있습니다.
짧은 정보
통사론
애니메이션 지연:<время> [,<время>]*
표기법
| 설명 | 예시 | |
|---|---|---|
| <тип> | 값의 유형을 지정합니다. | <размер> |
| 에이앤비 | 값은 지정된 순서대로 출력되어야 합니다. | <размер> && <цвет> |
| 에이 | 비 | 제안된 값(A 또는 B) 중 하나만 선택해야 함을 나타냅니다. | 정상 | 작은 모자들 |
| 에이 || 비 | 각 값은 단독으로 사용하거나 임의의 순서로 다른 값과 조합하여 사용할 수 있습니다. | 너비 || 세다 |
| 그룹 값. | [ 자르기 || 십자가] | |
| * | 0회 이상 반복합니다. | [,<время>]* |
| + | 한 번 이상 반복합니다. | <число>+ |
| ? | 지정된 유형, 단어 또는 그룹은 선택 사항입니다. | 삽입? |
| (A,B) | 최소한 A를 반복하되 B회 이하로 반복합니다. | <радиус>{1,4} |
| # | 쉼표로 구분하여 한 번 이상 반복합니다. | <время># |
예시
개체 모델
객체.style.animationDelay
메모
Chrome, Safari 및 Android는 -webkit-animation-delay 속성을 지원합니다.
Opera 버전 12.10 이전은 -o-animation-delay 속성을 지원합니다.
Firefox 버전 16 이전은 -moz-animation-delay 속성을 지원합니다.
사양
각 사양은 여러 단계의 승인을 거칩니다.
- Recommendation(권고) - 규격은 W3C에서 승인하고 표준으로 권장합니다.
- 후보자 추천( 가능한 권장 사항) - 표준을 담당하는 그룹이 목표를 충족한다고 만족하지만 표준을 구현하려면 개발 커뮤니티의 지원이 필요합니다.
- 제안된 권장 사항( 추천 추천) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문 위원회에 제출됩니다.
- 작업 초안 - 커뮤니티 검토를 위한 토론 및 수정 후 보다 성숙한 초안입니다.
- 편집자 초안( 편집 초안)는 프로젝트 편집자가 변경한 후 표준의 초안 버전입니다.
- 초안 ( 사양 초안)은 표준의 첫 번째 초안 버전입니다.
브라우저
브라우저
브라우저 표에는 다음 표기법이 사용됩니다.
CSS 애니메이션 반복 지연 (5)
다음은 75%의 시간 동안 동일한 것을 보여주는 작은 스니펫입니다. 이 반복 패턴은 대기 시간을 잘 에뮬레이트합니다.
@-webkit-keyframes 슬라이드 ( 0% (배경 위치: 0 0;) 25% (배경 위치: 0 0;) 50% (배경 위치: 0 0;) 75% (배경 위치: 0 0; ) 100% (배경 위치: 13em 0;) ) @-moz-keyframes 슬라이드 ( 0% (배경 위치: 0 0;) 25% (배경 위치: 0 0;) 50% (배경 위치: 0 0;) 75% (배경 위치: 0 0;) 100% (배경 위치: 13em 0;) ) @keyframes 슬라이드 ( 0% (배경 위치: 0 0;) 25% (배경 위치: 0 0) ;) 50% (배경 위치: 0 0;) 75% (배경 위치: 0 0;) 100% (배경 위치: 13em 0;) )
최근에 CSS 애니메이션을 "올바르게" 사용하는 방법을 발견했습니다(이전에 JavaScript에서와 같이 복잡한 시퀀스를 생성할 수 없다고 무시했습니다). 그래서 지금은 그들에 대해 배우고 있습니다.
이 효과를 위해 그라디언트 "플레어"가 진행 상황과 유사한 요소를 덮도록 하려고 합니다. 기본 Windows Vista/7 진행률 표시줄에 대한 효과와 유사합니다.
@keyframes 바샤인 -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) (1s) animations:4 선형 막대 )
보시다시피, 저는 4초 지연 후 1초 반짝임을 반복하려고 합니다.
그러나 animation-delay는 첫 번째 반복에만 적용되고 그 이후에는 반짝이가 계속 흔들리는 것 같습니다.
나는 다음과 같은 방식으로 이 질문을 "해결"했습니다.
@keyframes expbarshine ( from (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255);0) 80% background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) to (background-image:linear-gradient (120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) ) .progbar ) 5개 애니메이션: 선형 무한;
from 및 80%는 정확히 동일하므로 애니메이션 길이의 80%가 "지연"됩니다.
이것은 작동하지만 다음 애니메이션의 경우 애니메이션 자체는 동일한 길이로 유지되는 동안 지연이 가변적이어야 합니다(특정 요소에서는 일정하지만 애니메이션을 사용하는 요소 간에는 가변적임).
위의 "해결책"을 사용하면 더 긴 지연이 필요한 경우 더 느린 애니메이션으로 끝납니다.
첫 번째 반복뿐만 아니라 모든 반복에 애니메이션 지연을 적용할 수 있습니까?
minitech는 animation-delay가 애니메이션이 시작되기 전에 지연을 지정하고 아니다반복 사이의 지연. 사양 초안 편집기는 이것을 잘 설명하고 있으며 이 반복 지연 기능을 제공하는 이 기능에 대해 설명했습니다.
JS에 해결 방법이 있을 수 있지만 CSS만 사용하여 진행률 표시줄 플래시에 대해 이 반복적인 지연을 가짜로 만들 수 있습니다.
부모 div의 overflow:hidden에 토치의 분할 위치 position:absolute 및 overflow: hidden 을 선언하고 키프레임의 100% 상태를 진행률 표시줄의 너비보다 크게 설정하고 3차 베지어 시간 함수 및 오프셋 값으로 재생 왼쪽에서 "지연"을 사용하여 빛 완화 모드를 에뮬레이트하거나 인-아웃 또는 선형 시간을 에뮬레이트할 수 있습니다.
이것을 정확하게 얻기 위해 왼쪽 오프셋과 시간 함수를 정확하게 계산하기 위해 더 작은/scss 믹스인을 작성하는 것은 흥미로울 것입니다. 하지만 지금은 그것을 가지고 놀 시간이 없습니다. 이런 걸 보고 싶어!
다음은 그것을 보여주기 위해 함께 만든 데모입니다. (지표를 흉내내 보았습니다. 윈도우 런타임 7 및 약간 떨어졌지만 내가 말하는 것을 보여줍니다)
/* CSS */ @keyframes progress ( from ( width: 0px; ) to ( width: 600px; ) ) @keyframes barshine ( 0% ( left: -100px; ) 100% ( left: 1000px; ) ) .flare ( animation -이름: 바샤인, 애니메이션 지속 시간: 3초, 애니메이션 방향: 일반, 애니메이션 채우기 모드: 앞으로, 애니메이션 타이밍 기능: 큐빅 베지어(.14, .75, .2, 1.01), 애니메이션 반복 -count: 무한; 왼쪽: 0; 상단: 0; 높이: 40px; 너비: 100px; 위치: 절대; 배경: -moz-radial-gradient(center, 타원 커버, rgba(255,255,255,0.69) 0%, rgba( 255,255,255,0) 87%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ 배경: -webkit-radial-gradient(center, 타원 커버, rgba(255,255,255,0.69) 0%,rgba(255,255,52) ,0) 87%); /* Chrome10+,Safari5.1+ */ 배경: -o-radial-gradient(center, 타원 커버, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* 오 pera 12+ */ 배경: -ms-radial-gradient(중앙, 타원 커버, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ 배경: 방사형 그래디언트(중앙에 타원, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* 수평 기울기에 대한 IE6-9 폴백 */ z-index: 10; ) .progress ( animation-name: 진행; animation-duration: 10s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: 무한; overflow: hidden; position: relative; z-index: 1; 높이: 100%; 너비: 100%; 오른쪽 테두리: 1px solid #0f9116; background: #caf7ce; /* 오래된 브라우저 */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color- stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome, Safari4+ */ 배경: -webkit-linear-gradient(상단, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+, Safari5.1+ */ 배경: -o-linear-gradient(상단, #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ 배경: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96% ); /* IE10+ */ 배경: 선형 그라데이션(아래로, #caf7ce 0%,#caf7ce 18%,#3fe81e 4 5%, #2ab22a 96%); /* W3C */ 필터: progid:DXImageTransform. Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ ).progress:after ( 내용: ""; 너비: 100%; 높이: 29px; 오른쪽: 0; 아래쪽: 0; 위치: 절대; z-인덱스: 3; 배경: -moz- linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ 배경: -webkit-linear-gradient(왼쪽 , rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ 배경: -o-linear-gradient(left, rgba(202,247,206,0)0 %,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ 배경: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100 %); /* IE10+ */ 배경: 선형 그래디언트(오른쪽으로, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ 필터: progid:DXImageTransform.Microsoft .gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ ) .bar (마진 상단: 30픽셀, 높이: 40픽셀, 너비: 600픽셀, 위치) 위치: 상대; 테두리: 1px 솔리드 #777; 테두리 반경: 3px )
나는 비슷한 문제가 있었고 사용했습니다
@-webkit-keyframes 팬 ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ; ) )
양쪽 끝의 "지연"을 설명하기 위해 지속 시간을 속여야 한다는 것은 약간 성가신 일입니다.
이것이 당신이 해야 할 일입니다. 1초 애니메이션이 있고 반복 사이에 4초 지연이 있도록 작동해야 합니다.
@keyframes barshine ( 0% ( 배경 이미지:선형 그래디언트(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%); background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%); ) 무한 선형 애니메이션 ; )
그래서 나는 이것을 많이 다루었고 당신은 아주 해키하지 않고 그것을 할 수 있습니다. 이것은 애니메이션 반복 사이에 지연을 설정하는 가장 쉬운 방법입니다. 1. SUPER EASY 및 2. 약간의 논리만 필요합니다. 내가 만든 이 댄스 애니메이션을 확인하세요.
Dance( animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: 무한; -webkit-animation-iteration-count: 무한; animation-duration: 2.5s; -webkit-animation-duration: 2.5s, -webkit-animation-delay: 2.5s, animation-delay: 2.5s, animation-timing-function: easy-in, -webkit-animation-timing-function: easy-in, ) @keyframes dance( 0% ( -webkit-transform: 회전(0deg); -moz-transform: 회전(0deg); -o-transform: 회전(0deg); -ms-transform: 회전(0deg); 변환: 회전(0deg); ) 25 % ( -webkit-transform: 회전(-120deg), -moz-transform: 회전(-120deg), -o-transform: 회전(-120deg), -ms-transform: 회전(-120deg), 변형: 회전( -120deg); ) 50% ( -webkit-transform: 회전(20deg), -moz-transform: 회전(20deg), -o-transform: 회전(20deg), -ms-transform: 회전(20deg), 변환: 회전(20deg); ) 100% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms-transform: 회전(0deg), 변환: 회전(0deg); ) ) @-webkit-keyframes 춤 ( 0% ( -webkit-transform: 회전(0deg); -moz-transform: 회전(0deg); -o-transform: 회전(0deg); -ms-transform: 회전(0deg) ), 변환: 회전(0deg), ) 20% ( -webkit-transform: 회전(20deg), -moz-transform: 회전(20deg), -o-transform: 회전(20deg), -ms-transform: 회전( 20deg); 변형: 회전(20deg); ) 40% ( -webkit-transform: 회전(-120deg), -moz-transform: 회전(-120deg), -o-transform: 회전(-120deg), -ms- 변환: 회전(-120deg), 변환: 회전(-120deg), ) 60% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms-transform: 회전(0deg), 변환: 회전(0deg), ) 80% ( -webkit-transform: 회전(-120deg), -moz-transform: 회전(-120deg), -o-transform: 회전( -120deg); -ms-transform: 회전(-120deg); 변환: 회전(-120deg); ) 95% ( -webkit-transform: 회전(20deg); -moz-transform: 회전(20deg); -o- 변환: 회전(20deg), -ms-변환: 회전(20deg); 변환: 회전(20deg); ) )
나는 당신이 단지 1이라는 것을 알았을 때 애니메이션을 지연시키는 방법을 알아내려고 실제로 여기에 왔습니다. 애니메이션의 지속 시간을 연장하고 각 애니메이션에 대한 시간의 비율을 얻는 것입니다. Beore 나는 각각 0.5초씩 총 2.5초 동안 사용했습니다. 이제 총 지속 시간과 동일한 지연 시간을 추가하고 싶었기 때문에 지연 시간은 2.5초라고 가정해 보겠습니다.
애니메이션 시간은 2.5초이고 지연은 2.5이므로 지속 시간을 5초로 변경합니다. 그러나 전체 지속 시간을 두 배로 늘렸으므로 애니메이션 부분을 절반으로 줄여야 합니다. 아래에서 최신 정보를 확인하세요. 이것은 저에게 효과적이었습니다.
@-webkit-keyframes 춤 ( 0% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms-transform: 회전(0deg), 변환: 회전(0deg); ) 10% ( -webkit-transform: 회전(20deg); -moz-transform: 회전(20deg); -o-transform: 회전(20deg); -ms-transform: 회전(20deg) ; 변환: 회전(20deg); ) 20% ( -webkit-transform: 회전(-120deg); -moz-transform: 회전(-120deg); -o-transform: 회전(-120deg); -ms-transform: 회전(-120deg); 변환: 회전(-120deg); ) 30% ( -webkit-transform: 회전(0deg); -moz-transform: 회전(0deg); -o-transform: 회전(0deg); -ms -변환: 회전(0deg); 변환: 회전(0deg); ) 40% ( -webkit-transform: 회전(-120deg); -moz-transform: 회전(-120deg); -o-transform: 회전(-120deg) ), -ms-transform: 회전(-120deg), 변환: 회전(-120deg), ) 50% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg); -ms-변환: 회전(0deg); 변환 rm: 회전(0도); ) )
이것은 애니메이션의 지속 시간과 각 부분의 %를 변경하는 방법을 파악하는 데 사용하는 계산입니다.
희망 기간 = x
Wish_duration = animation_part_duration1 + animation_part_duration2 + ... (등)
총 기간 = x + y
animation_part_duration1_actual = animation_part_duration1 * Wish_duration / total_duration
간격을 두고 좌우로 움직이는 포스터를 벽에 만들었습니다. 나를 위해 이것은 작동합니다.
Div-animation( -webkit-animation: 바운스 2000ms 이즈아웃, -moz-animation: 바운스 2000ms 이즈아웃, -o-animation: 바운스 2000ms 이즈아웃, 애니메이션: 바운스 2000ms 이즈아웃 무한; -webkit-animation -delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; ) @-webkit-keyframes 바운스( 0% ( transform: rotate(0deg); ) 3% ( 변환: 회전(1deg); ) 6% ( 변환: 회전(2deg); ) 9% ( 변환: 회전(3deg); ) 12% ( 변환: 회전(2deg); ) 15% ( 변환: 회전(1deg) ); ) 18% ( 변환: 회전(0deg); ) 21% ( 변환: 회전(-1deg); ) 24% ( 변환: 회전(-2deg); ) 27% ( 변환: 회전(-3deg); ) 30% ( 변환: 회전(-2deg); ) 33% ( 변환: 회전(-1deg); ) 36% ( 변환: 회전(0deg); ) 100% ( 변환: 회전(0deg); ) )