2023. 6. 14. 22:26ㆍWEB-FRONTEND/CSS
애니메이션 속성이 필요할까?
블로그에 업로드하진 않았지만 transition 속성과 transform 속성을 결합하면 꽤나 그럴듯한 애니메이션 효과를
줄 수 있었다.
하지만 두조합으로도 한계점은 확실하게 있다.
여러 이유가 있겠다만 저 두 조합으로는 처음과 끝지점의
원상태와 움직인후의 상태까지만 조정이 가능하다.
중간지점에서의 효과나 모션그래픽등에서 종종 볼 수 있는 키프레임단위의 효과들은 어떻게 적용시켜야 할까?
시작과 끝 반복 횟수나 설정은?
이를 보완할 수 있는 속성이 애니메이션 속성이다.
기본 문법
keyframes 정의
애니메이션 속성을 사용하기 위해선
먼저 keyframes를 정의해줘야 한다.
@keyframes move__box {
from {
}
to{
}
}기본적인 구조는 이러하다.
move__box는 해당 정의할 애니메이션효과의 이름으로써 본인이 원하는 문구를 넣으면 된다.
from {} 괄호 안엔 시작지점의 css속성
to {} 괄호 안엔 끝지점의 css 속성이 들어가면 된다.
???: 근데 님 애니메이션 속성은 시작 끝지점 말고
원하는 프레임 별로 효과 줄 수 있다 하지 않음?
@keyframes move__box{
0%{
}
50%{
}
100%{
}
}%를 넣어서 이를 해결할 수 있다.
이런 구조로 keyframes를 정의하면 %{} 괄호 안에 원하는 css속성을 넣음으로써
애니메이션 효과를 조정할 수 있다.
animation 적용
keyframes를 정의했으면 이제 애니메이션효과를 적용할 요소에
애니메이션 속성을 넣어줘야 한다.
자주 사용하는 애니메이션 속성에는
5가지가 있다.
animation-name: move__box; //적용할 애니메이션 이름
animation-duration: 2s; //애니메이션이 완료되는 시간 (s, ms단위 입력가능)
animation-timing-function: ease-in-out; //애니메이션의 속도패턴 (transition의 그것과 유사하다)
animation-delay //애니메이션 딜레이
animation-iteration-count: infinite; //애니메이션 반복 설정
ex) 0 : 반복 안 함
infinite: 무한반복
이외에도 구체적인 숫자도 할당가능
animation-direction: alternate; //애니메이션의 재생방향설정
ex) normal(기본값) : 정방향
reverse: 역방향
alternate: 정방향 재생 후 반복 시 정방향/역방향 번갈아 재생
alternate-reverse: 역방향 재생후 반복시 역방향/정방향 번갈아 재생
너무 길어!!!!
이 애니메이션 속성도 트랜지션 속성과 같이 단축속성이 존재한다.
animation:이름 시간 속도패턴 딜레이 반복설정 재생방향설정;
ex) animation:move__box 2s ease-in-out 0.5s infinite alternate;
순서와 요소사이의 띄어쓰기에 유의하자
실습
기본구조
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-01-animation</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container"> <!--테두리박스-->
<div class="item"> <!--애니메이션이 적용될 요소-->
<span>item</span>
</div>
</div>
</body>
</html>css
*{
box-sizing: border-box;
}
.container{
width: 100%;
height: 104px;
border: 2px solid red;
position: relative;
}
.item{
width: 100px;
height: 100px;
background-color: blue;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
animation: move__box 2s ease-in-out 0.5s infinite alternate; /*애니메이션 속성*/
position: absolute;
}
.item span{
color: white;
}
@keyframes move__box { /*키프레임 정의 (css속성 적용)*/
from {
border-radius: 0;
left: 0;
background-color: blue;
transform: scale(1);
}
to{
border-radius: 50%;
left: calc(100% - 100px);
background-color: green;
transform: scale(0.75);
}
}실제 작동 모습
See the Pen Untitled by 김윤원 (@bdzoyvfj-the-bold) on CodePen.
레퍼런스
인프런 코드캠프 강력한css 강의
'WEB-FRONTEND > CSS' 카테고리의 다른 글
| #transform (0) | 2023.06.14 |
|---|