플렉스 애니메이션
Cascading Style Sheet CSS는 사용자 인터페이스를 디자인하는 데 도움이 됩니다. 우리는 다양한 CSS 속성을 사용하여 페이지 스타일을 지정하고 레이아웃을 더 매력적이고 사용하기 좋게 만듭니다.
CSS 플렉스박스란?
Flexbox는 위치 및 부동 없이 반응형 웹 페이지를 만드는 데 도움이 되는 유연한 레이아웃입니다. Flexbox 이전에는 네 가지 레이아웃 속성을 사용하여 웹 페이지를 디자인했지만 Flexbox는 여러 위치 속성으로 페이지가 반응하도록 만드는 더 쉬운 방법입니다.
Flexbox 속성은 HTML 콘텐츠의 형식을 지정하는 데 도움이 되는 CSS 속성 중 하나입니다. 콘텐츠와 항목을 정렬하고, 공간을 만들고, 항목 크기를 조정하고, 반응성을 높이고 항목을 고정된 위치와 더 많은 항목 속성에 배치하는 데 도움이 됩니다.
플렉스 컨테이너를 사용하여 내부에 플렉스 항목을 만듭니다.
항목 애니메이션을 만드는 데 사용되는 플렉스 항목 속성입니다.
CSS에서 애니메이션이란 무엇입니까?
CSS의 애니메이션은 호버 또는 마우스를 사용하여 개체 이동을 시작하는 것과 같은 외부 트리거 없이 동적 항목 만들기를 의미합니다. 전환 과정에서 외부 소스를 사용하여 변경을 시작합니다. 번역에 사용되는 JavaScript 및 jQuery 없이 자동 애니메이션을 생성하는 CSS의 도움으로 생성된 애니메이션 속성입니다.
CSS 애니메이션 속성
요소에 애니메이션을 적용하려면 특정 기간 동안 요소에 적용하려는 변경 사항 및 스타일을 내부에 선언합니다. 키프레임은 특정 시간 동안 변경하려는 스타일과 단계를 저장합니다.
플렉스 애니메이션
통사론
@keyframes test {
0% {top: 0px; left: 0px; background: red;}
50% {top: 200px; left: 1250px; background: blue }
100% {top: 0px; left: 0px; background: rgb(0, 140, 255);}
}
통사론
div{
animation: animation-name animation-time-duration animation-iteration-count;
}
<div class="containerbox">
<div class="box">Box 1</div>
<div class="box2">Box 2</div>
<div class="box">Box</div>
</div>
<div class="containerbox">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1. 플렉스 속성
flex 속성은 flex 속성의 grow, shrink 값을 각각 추가한 flexbox 속성입니다. 키프레임 내에서 flex 속성 사용.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 50px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
animation: test 5s infinite;
}
@keyframes test {
100% { flex: 1;}
}
</style>
</head>
<body>
<h1>Flex Animation</h1>
<div class="flex-container">
<div style="background-color: rgb(131, 243, 131);">1</div>
<div style="background-color: rgb(236, 83, 236);">2</div>
<div style="background-color: rgb(226, 25, 159);">3</div>
<div style="background-color: rgb(238, 108, 115);">4</div>
<div style="background-color: rgb(238, 241, 12);">5</div>
<div style="background-color: rgb(221, 161, 122);">6</div>
<div style="background-color: rgb(130, 196, 240);">7</div>
<div style="background-color: rgb(236, 69, 105);">8</div>
</div>
</body>
</html>
산출
2. flex-grow 속성
다른 플렉스 아이템과 관련된 플렉스 아이템의 성장 속성에서 작동합니다. 값은 숫자여야 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.containerbox {
height: 95vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.box {
background: rgb(60 0 0);
flex-grow: 1;
}
.box2 {
font-family: monospace;
color: white;
font-size: 35px;
text-align: center;
background: rgba(85, 4, 4, 0.829);
animation: flexanimation 1s cubic-bezier(0.76, 0.05, 0.58, 1) 1s infinite alternate backwards;
}
@keyframes flexanimation {
100% {
flex-grow: 5;
}
}
</style>
</head>
<body>
<div class="containerbox">
<div class="box"></div>
<div class="box2">Animation Created with Flex-grow Property</div>
<div class="box"></div>
</div>
</body>
</html>
아웃아웃
3. Flex-shrink 속성
다른 플렉스 아이템과 관련된 플렉스 아이템의 축소 속성에서 작동합니다. 값은 숫자여야 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: rgb(28, 14, 107);
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 150px;
font-size: 30px;
width: 100px;
margin: 5px;
animation: test 3s infinite;
}
@keyframes test {
70% {
flex-shrink: 1;
}
}
</style>
</head>
<body>
<h1>Flex-shrink</h1>
<div class = "mycontainer">
<div style="background-color: rgb(131, 243, 131);">1</div>
<div style="background-color: rgb(236, 83, 236);">2</div>
<div style="background-color: rgb(226, 25, 159);">3</div>
<div style = "flex-shrink: 0">4</div>
<div style="background-color: rgb(238, 241, 12);">5</div>
<div style="background-color: rgb(221, 161, 122);">6</div>
<div style="background-color: rgb(130, 196, 240);">7</div>
<div style="background-color: rgb(236, 69, 105);">8</div>
<div style="background-color: rgb(238, 241, 12);">9</div>
<div style="background-color: rgb(221, 161, 122);">10</div>
</div>
</body>
</html>
산출
flex-basis 속성은 시작하는 플렉스 아이템의 길이를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: flex;
background-color: rgb(17, 185, 190);
height: 100px;
}
.box > div {
background-color: white;
text-align: center;
line-height: 75px;
text-align: center;
font-size: 30px;
width: 100px;
margin: 5px;
}
div {
animation: test 3s infinite;
}
@keyframes test {
50% {
flex-basis: 100px;
} }
</style>
</head>
<body>
<h1>Flex-basis Animation</h1>
<div class = "box">
<div style="background-color: greenyellow">1</div>
<div style="background-color: goldenrod">2</div>
<div style="background-color: green">3</div>
<div style="background-color: red">4</div>
<div style = "flex-basis: 350px">5</div>
<div style="background-color: grey">6</div>
<div style="background-color: plum">7</div>
<div style="background-color: darkorchid;">8</div>
<div style="background-color: sandybrown">9</div>
<div style="background-color: brown">10</div>
</div>
</body>
</html>
산출
결론
이 기사에서는 다양한 flex 속성을 사용하여 CSS flexbox에 애니메이션을 적용합니다. 웹 페이지의 애니메이션은 매력적입니다. Flexbox는 반응형 레이아웃을 만드는 데 도움이 되는 고급 유형의 CSS이며 다양한 속성(콘텐츠 및 항목 정렬, 공간, 항목 크기 등)을 사용하여 HTML 형식을 지정하는 데 도움이 됩니다. @keyframes 규칙과 함께 CSS 플렉스 컨테이너 및 플렉스 항목을 사용하여 애니메이션을 만듭니다.
Reference
이 문제에 관하여(플렉스 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aisharajput/flex-animation-34b5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
