[키프레임 규칙(@keyframe)을 이용한 애니메이션]
애니메이션 적용 할 건데 이건 keyframe을 이용할 것임
규칙이기 때문에 규칙을 잘 지켜줘야 함
** 규칙 **
키프레임 애니메이션 이름지정
animation-name: 애니메이션이름 ;
animation-duration: 3s; 요거 필수!! 있어야지 애니메이션 일어남
animation-delay: 2s;
축약(한방에 적용하기) 순서 상관없음 단 duration은 delay 보다 앞에 있어야 한다 !!!
@keyframes 애니메이션이름 {
요 안에다가 keyframe 규칙 작성 : 애니메이션 일어나게 한다.
방법1 : from-to 사용
from{
width: 100px;
height: 100px; 처음값 그대로 시작하는거면 생략가능 (to만 있어도 괜춘)
}
to{
width: 400px;
height: 400px;
background-color: rgb(247, 150, 5);
}
방법2 : %로 지정
50%{
width: 250px;
height: 250px;
background-color: rgb(247, 150, 5);
}
100%{
width: 400px;
height: 400px;
background-color: rgb(39, 205, 235);
}
}
<style>
/*키프레임 규칙(@keyframe)을 이용한 애니메이션*/
*{
margin: 0;
padding:0;
}
#wrap{
display: flex;
flex-direction:column;
}
#rect{
width: 100px;
height: 100px;
background-color: brown;
animation: myani1 3s 2s ;
}
@keyframes myani1 {
50%{
width: 250px;
height: 250px;
background-color: rgb(247, 150, 5);
}
100%{
width: 400px;
height: 400px;
background-color: rgb(39, 205, 235);
}
}
#circ1{
width: 100px;
height: 100px;
background-color: rgb(233, 191, 102);
text-align: center;
line-height: 100px;
animation-name: myani2 ;
animation-duration: 3s;
animation-delay: 3s;
}
@keyframes myani2{
50%{
width: 200px;
height: 200px;
line-height: 200px;
transform: rotate(180deg);
border-radius: 100px;
}
100%{
width: 400px;
height: 400px;
line-height: 400px;
transform: rotate(360deg);
border-radius: 500px;
}
}
#circ2{
width: 100px;
height: 100px;
background-color: rgb(26, 150, 53);
/* animation-name: myani3 ;
animation-delay: 2s; /*delay는 처음에만 적용*/
/* animation-duration: 3s;
animation-iteration-count: infinite;/*애니메이션 횟수*/
animation: myani3 infinite 3s 2s ;
}
@keyframes myani3 {
to{
transform: translate(400px,400px);
}
}
#circ2:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<h2>키프레임 규칙을 이용한 애니메이션</h2>
<div id="wrap">
<div id="rect"></div>
<div id="circ1">CIRCLE</div>
<div id="circ2"></div>
</div>
</body>키프레임 규칙을 이용한 애니메이션
2. 문제 !! 로딩중 애니메이션 만들기 !!
<style>
.container{
display: inline-flex;
margin: 10px;
}
.item{
width: 20px;
height: 20px;
background-color: brown;
border-radius:50%;
animation: myani 3s 1 ;
/* animation-duration: ;*/
animation-iteration-count: infinite;
}
@keyframes myani {
50%{
transform: scale(0.5);
background-color: rgb(155, 120, 120);
}
100%{
transform: scale(1);
background-color: brown;
}
}
.item:nth-child(1){
animation-name: myani ;
margin: 20px;
}
.item:nth-child(2){
animation-delay: 0.2s;
margin: 20px;
}
.item:nth-child(3){
animation-delay: 0.4s;
margin: 20px;
}
.item:nth-child(4){
animation-delay: 0.6s;
margin: 20px;
}
.item:nth-child(5){
animation-delay: 0.8s;
margin: 20px;
}
.item:nth-child(6){
animation-delay: 1s;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>자쟌 !!
'학원 > CSS' 카테고리의 다른 글
| 11/11 41-4 [CSS] ResponseWeb (0) | 2022.11.13 |
|---|---|
| 11/11 41-2 [CSS] Import&Media (0) | 2022.11.11 |
| 11/11 41-1 [CSS] Transform (1) | 2022.11.11 |
| 11/10 40-4 [CSS] FLEX를 이용하여 인터넷 사이트처럼 배치하기 (0) | 2022.11.10 |
| 11/10 40-3 [CSS] FLEX_2[Flex Item에 적용되는 속성] (1) | 2022.11.10 |