#1 Animation이란?
The animation shorthand CSS property applies an animation between styles.
animation은 스타일 간에 애니메이션 효과를 부여한다.
도지코인에 애니메이션 효과를 부여했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윈터</title>
<style>
/* 애니메이션 문법 */
@keyframes CoinFlip {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
img {
border: 10px solid black;
border-radius: 80%;
/* animation: CoinFlip 5s ease-in-out; */
animation: CoinFlip 4s ease-in infinite;
}
</style>
</head>
<body>
<img src="../img/dogi.jpg" alt="">
<span>수수수수퍼노바</span>
</body>
</html>#2 문법
애니메이션 속성을 정의하려면 애니메이션 이름을 정하고 @keyframes과 함께 써야 한다.
@keyframes CoinFlip {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}@keyframes 옆에 CoinFlip이라는 애니메이션 이름을 넣었다. 본체에는 이전 스타일과 이후 스타일을 넣는다. 이전 스타일은 from 이후 스타일은 to를 사용한다. 애니메이션은 요소에 from과 to사이를 자동으로 다니도록 적용한다.
애니메이션을 정의했으면 적용할 요소를 지정한다.
img {
border: 10px solid black;
border-radius: 80%;
/* animation: CoinFlip 5s ease-in-out; */
animation: CoinFlip 4s ease-in infinite;
}예시의 경우에 img 태그에 지정했다. animation 속성을 부여하고 적용할 애니메이션의 이름(CoinFlip), 1주기당 시간(4s), 동적효과(ease-in), 그리고 지속시간(infinite)을 정한다.
animation: CoinFlip 4s ease-in infinite;#3 응용
애니메이션 별 단계 나누기
애니메이션 단계를 설정할 수 있다. 2단계면 위의 예시처럼 from과 to를 사용한다.
@keyframes CoinFlip {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}여러 단계를 설정하려면 %로 나눌 수 있다.
@keyframes CoinFlip {
0% {
transform: rotateY(0);
}
25% {
transform: scale(1);
}
50% {
border-radius: 50%;
transform: rotateY(180deg) translateY(100px);
border-color: tomato;
opacity: 0;
}
75% {
transform: scale(3);
}
100% {
transform: rotateY(0);
}주의사항
animation은 되도록이면 formation에만 적용하는 것을 권장한다. 다른 속성의 경우 animation 효과를 넣을 수 없는 경우도 있다. 현재는 border-radius와 border-color, opacity 등에 적용할 수 있다는 것을 확인했다.
50% {
border-radius: 50%;
transform: rotateY(180deg) translateY(100px);
border-color: tomato;
opacity: 0;
}