이 기사는 여러 CSS 애니메이션을 동시에 재생/추가하는 실제 데모를 보여줍니다.
동시에 여러 CSS 애니메이션을 재생하는 방법은 무엇입니까?
동시에 여러 CSS 애니메이션을 적용함으로써 개발자는 보다 매력적인 인터페이스를 쉽게 만들 수 있습니다. 많은 CSS 애니메이션을 동시에 재생하려면 각 애니메이션에 고유한 이름을 지정하고 해당 이름을 페이지의 동일하거나 별도의 구성 요소에 적용합니다.
하나 이상의 애니메이션을 동시에 재생/추가하려면 아래 절차를 따르십시오.
1단계: 구조 생성
먼저 다음 단계에서 애니메이션이 적용되는 HTML 요소를 만듭니다. 예를 들어 이미지가 삽입됩니다.
< 사업부 수업 = '기간' >
< 이미지 소스 = '책.jpg' 키 = '100픽셀' 너비 = '100픽셀' 수업 = '생기 있게 하다' >
< / 사업부 >
위의 코드 조각에서:
- 먼저 이미지 경로를 ' 소스 ' 기인하다.
- 다음으로 '의 값 100픽셀 '는 CSS의 '너비' 및 '높이' 속성에 제공됩니다.
- 또한 '의 값을 설정하십시오. 생기 있게 하다 ' 로 ' 수업 ' 기인하다.
2단계: 애니메이션 설정
“ 키프레임 ”는 웹 페이지의 필요에 따라 사용자 지정 애니메이션을 만드는 데 활용됩니다. 예를 들어, 아래 코드 조각에서 두 개의 애니메이션이 생성됩니다.
@-webkit-keyframes 스핀 {100 % {
변환: 회전 ( 180도 ) ;
}
}
@-webkit-keyframes 스케일 {
100 % {
변환: scaleX ( 1 ) scaleY ( 1 ) ;
}
}
위의 코드 조각에서:
- 먼저 “ @-웹킷-키프레임 ”를 설정하기 위해 메커니즘이 활용되고 있습니다. 회전 ' 그리고 ' 회전 ”라는 이름의 애니메이션.
- 다음으로 ' 변환 ” 값을 갖는 속성 회전() ”에서 회전 ” 애니메이션 본문. 이 기능은 요소를 ' 180도 '.
- 그런 다음 원래 요소를 “ 1 ” 둘 다에서 엑스 ' 그리고 ' 그리고 ”의 축 규모 ” 애니메이션 본문.
3단계: HTML 요소에 애니메이션 적용
CSS 부분 내에서 ' 클래스를 선택하십시오. 생기 있게 하다 '에 할당된 ” 태그를 추가하고 다음 CSS 속성을 제공합니다.
위치: 절대;
왼쪽: 60 %;
너비 : 110px;
키 : 110px;
여백: -40px 0 0 -40px;
-webkit-animation: 스케일 3s 무한 선형;
-webkit-animation: 스핀 2s 무한 선형;
}
위의 코드 블록에 사용된 속성에 대한 설명:
- 먼저 '의 값을 설정합니다. 순수한 ” CSS에 “ 위치 ' 재산. 그것은 ' 이미지 ” 애니메이션에 따른 요소.
- 그런 다음 '의 값을 제공합니다. 60% ”, “ 110픽셀 ' 그리고 ' 110픽셀 ” CSS에 “ 왼쪽 ”, “ 너비 ' 그리고 ' 키 ' 속성. 이러한 속성은 요소의 위치와 크기를 설정하는 데 사용됩니다.
- 그런 다음 '의 값을 설정하십시오. 스케일 3s 무한 선형 ' 로 ' -웹킷 애니메이션 ” CSS 속성.
- 그리고 ' 3초 '는 해당 애니메이션의 지속 시간이고 ' 무한 '는 애니메이션의 지속 시간이고 ' 선의 ”는 애니메이션의 방향입니다.
- 마지막으로 '의 값을 제공합니다. 스핀 2s 무한 선형 ” CSS에 “ -웹킷 애니메이션 ' 재산. 이 속성은 '라는 두 번째 애니메이션을 추가합니다. 회전 에 ' 이미지 ' 요소.
위의 코드 블록을 컴파일한 후 애니메이션은 다음과 같습니다.
위의 gif는 ' 회전 ” 애니메이션이 대상 요소에서 재생 중입니다.
4단계: HTML 요소에서 여러 애니메이션 재생
위의 단계에서와 같이 하나의 애니메이션만 요소에 적용되었습니다. 동일한 '에 여러 값이 할당되었기 때문입니다. -웹킷 애니메이션 ' 재산.
이 문제를 해결하려면 대상 요소를 다른 HTML 요소로 래핑하십시오. '로 사업부 ”가 이미 첫 번째 단계에서 래퍼로 사용된 경우 해당 “ 기간 ” 다음과 같이 코드를 업데이트합니다.
.생기 있게 하다 {위치: 절대;
왼쪽: 60 %;
너비 : 110px;
키 : 110px;
여백:-40px 0 0 -40px;
-webkit-animation: 스케일 3s 무한 선형;
}
. 기간 {
위치: 상대적;
상단: 160px;
-webkit-animation: 스핀 2s 무한 선형;
}
위의 코드에서:
- 처음에는 “ 생기 있게 하다 ” 클래스는 동일하게 유지되며 두 번째 애니메이션만 제거되어 “ 기간 ' 수업.
- 그 후 '를 활용하여 위치를 설정하십시오. 위치 ' 그리고 ' 맨 위 ' 속성.
위의 코드 스니펫을 실행하면 이제 웹페이지가 다음과 같이 나타납니다.
출력은 선택한 HTML 요소에 두 애니메이션이 동시에 적용되었음을 보여줍니다.
결론
여러 CSS 속성을 적용하려면 HTML 요소로 요소를 래핑하고 애니메이션을 적용하여 각 HTML 요소가 단일 애니메이션을 보유하도록 합니다. 하위 속성은 상위 HTML 요소에 적용된 애니메이션을 상속하므로 컴파일러에 대한 오류나 모호함 없이 여러 애니메이션이 적용됩니다. 하나 이상의 CSS 애니메이션을 동시에 재생/추가하는 절차입니다.