CSS 애니메이션 및 transform-origin
개시하다
CSS 애니메이션 이외의
transform-origin 사용법이 있습니까?transform-origin와 즐겁게 놀았기 때문에 이번에는 이 애니메이션에 대한 해설을 하겠습니다.완성품
소스 코드
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ee</title>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #333;
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
.loading {
width: 350px;
height: 50px;
display: flex;
animation: hue-rotate linear 4s 0s infinite;
}
@keyframes hue-rotate {
100% {filter: hue-rotate(360deg);}
}
.loading div {
width: 250px;
height: 50px;
position: relative;
}
.loading div::before,
.loading div::after {
content: "";
display: block;
width: 50px;
height: 50px;
background: rgba(0, 231, 255, 1);
border-radius: 50%;
position: absolute;
box-shadow:
0 0 5px rgba(0, 231, 255, 1),
0 0 10px rgba(0, 231, 255, 1),
0 0 20px rgba(0, 231, 255, 1),
0 0 40px rgba(0, 231, 255, 1),
0 0 80px rgba(0, 231, 255, .5),
0 0 160px rgba(0, 231, 255, .2);
}
.loading div::after {right: 0;}
.loading div:nth-child(1) {animation: rotate1 ease-in-out 2s 0s infinite;}
@keyframes rotate1 {
0%,50% {transform-origin: 50% 50%;}
25% {transform: rotate(180deg);}
26%,50% {transform: rotate(180deg);}
50.1%,100% {transform-origin: 175px 50%;}
100% {transform: rotate(540deg);}
}
.loading div:nth-child(2) {
margin-left: -150px;
animation: rotate2 ease-in-out 2s 0s infinite;
}
@keyframes rotate2 {
0%,50% {transform-origin: 50% 50%;}
0%,25% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
50.1%,100% {transform-origin: 75px 50%;}
100% {transform: rotate(540deg);}
}
</style>
</head>
<body>
<div class="loading">
<div></div>
<div></div>
</div>
</body>
</html>
해설
HTML은 다음과 같습니다.
<div class="loading">
<div></div>
<div></div>
</div>
body {
background: #333;
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
flex가 아니라grid 중앙우편으로 보냅니다.별 의미 없이 그냥 기분이야.div의 양쪽 끝에 위조 요소 만들기div을 더해서 겹치게 한다transform-origin 설정우선
.loading 사이즈를 고려해보세요.이번 공의 사이즈는
50px이고 같은 간격도 50px이다.공 4개와 간극 3개
width는 350px였다..loading {
width: 350px;
height: 50px;
display: flex;
}
div의width는250px입니다..loading div {
width: 250px;
height: 50px;
position: relative;
}
.loading div::before,
.loading div::after {
content: "";
display: block;
width: 50px;
height: 50px;
background: rgba(0, 231, 255, 1);
border-radius: 50%;
position: absolute;
}
.loading div::after {right: 0;}
.loading div:nth-child(2) {margin-left: -150px;}
여기에'박스-shoadow'를 더해 트렌디하게 만들어보자.
.loading div::before,
.loading div::after {
content: "";
display: block;
width: 50px;
height: 50px;
background: rgba(0, 231, 255, 1);
border-radius: 50%;
position: absolute;
+ box-shadow:
+ 0 0 5px rgba(0, 231, 255, 1),
+ 0 0 10px rgba(0, 231, 255, 1),
+ 0 0 20px rgba(0, 231, 255, 1),
+ 0 0 40px rgba(0, 231, 255, 1),
+ 0 0 80px rgba(0, 231, 255, .5),
+ 0 0 160px rgba(0, 231, 255, .2);
}
이렇게 하면 CSS 부분이 완성됩니다.
애니메이션 생성
애니메이션을 제작하기 전에 먼저 주제
transform-origin에 대해 이야기합시다.구문는 다음과 같다.
/* 값 1 구문/
transform-origin: 2px;
transform-origin: bottom;
/x-offset | y-offset/
transform-origin: 3cm 2px;
/x-offset-keyword | y-offset/
transform-origin: left 2px;
/x-offset-keyword | y-offset-keyword/
transform-origin: right top;
/y-offset-keyword | x-offset-keyword/
transform-origin: top right;
/x-offset | y-offset | z-offset/
transform-origin: 2px 30% 10px;
/x-offset-keyword | y-offset | z-offset/
transform-origin: left 5px -3px;
/x-offset-keyword | y-offset-keyword | z-offset/
transform-origin: right bottom 2cm;
/y-offset-keyword | x-offset-keyword | z-offset/
transform-origin: bottom right 2cm;
/글로벌 값 */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;
주로 두 값의 문법을 사용하는데 원소의 왼쪽 상단은 기점
x-offset,y-offset이다.키워드를 지정할 수도 있기 때문에 직관적으로 처리할 수 있다.
키워드
값
left
0%
center
50%
right
100%
top
0%
bottom
100%
그럼 지금부터 애니메이션 제작을 시작하겠습니다.
.loading div:nth-child(1) {animation: rotate1 ease-in-out 2s 0s infinite;}
@keyframes rotate1 {
0%,50% {transform-origin: 50% 50%;}
25% {transform: rotate(180deg);}
26%,50% {transform: rotate(180deg);}
50.1%,100% {transform-origin: 175px 50%;}
100% {transform: rotate(540deg);}
}
50.1%,100% {transform-origin: 175px 50%;}이 부분에서는 50%이 아니라 50.1%의 이유로 두 번째div를 삭제하고 실행하면 이해하기 쉽다.
변경된 경우
50%,100% {transform-origin: 175px 50%;}
이렇게 하면
transform-origin: 50% 50%;에서 transform-origin: 175px 50%;까지 변화할 때의 이동을 볼 수 있다.그럼 외관이 안 좋아서 .1% 사이로 움직여요.하지만 그렇게 되면 움직이는 일이 드러나고 다른 div에도 같은 애니메이션을 덧붙여 숨깁시다..loading div:nth-child(2) {
margin-left: -150px;
+ animation: rotate2 ease-in-out 2s 0s infinite;
}
@keyframes rotate2 {
0%,50% {transform-origin: 50% 50%;}
0%,25% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
50.1%,100% {transform-origin: 75px 50%;}
100% {transform: rotate(540deg);}
}
이렇게 완성해도 되지만, 예쁜 색으로 변신해 보세요.
.loading {
width: 350px;
height: 50px;
display: flex;
+ animation: hue-rotate linear 4s 0s infinite;
}
@keyframes hue-rotate {
100% {filter: hue-rotate(360deg);}
}
응용 프로그램
활용하면 이런 것도 가능하니 꼭 도전해 보세요.
끝맺다
모르는 점이 있으면 메시지를 남겨주세요.
Reference
이 문제에 관하여(CSS 애니메이션 및 transform-origin), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/wagomu/articles/46104eb06d99ae텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
