주님 감사드립니다!
animation
인프런 - 인터랙티브 웹 개발 제대로 시작하기 를 수강하며 적는 글
CSS_animation MDN문서
animation은 transition과 비슷하지만, keyframe을 추가해줄 수 있다.
keyframe은 변화가 있는 지점을 뜻한다.
애니메이션은 이런 키프레임을 어디든지 추가해줄 수 있다.
이게 transition과 animation의 가장 큰 차이점. transition은 중간에 변화가 가능한 지점이 없다.
animation은 timeline이라는 개념이 있다. 시작점 - 0% , 끝점 - 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes sample-ani{
0% {
}
50%{
transform: translate(120px);
}
100% {
transform: translate(200px, 600px);
}
}
.box{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: #fff000;
border: 2px solid black;
animation: sample-ani /*어떤 애니메이션을 쓸지*/ 5s /*몇초동안 실행할지*/;
}
</style>
</head>
<body>
<div class="box">BOX</div>
</body>
</html>위 코드는 다음과 같이 실행된다.
여기서 시간을 5s가 아니라 1s로 바꾸면 이렇게 더 빨리 실행됨
.box{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: #fff000;
border: 2px solid black;
animation: sample-ani /*어떤 애니메이션을 쓸지*/ 1s /*몇초동안 실행할지*/;
}
transition과 똑같이 등속도 (같은속도)가 아니라 가속도가 있다.
```css
.box{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: #fff000;
border: 2px solid black;
animation: sample-ani /*어떤 애니메이션을 쓸지*/ 1s /*몇초동안 실행할지*/ linear /* */;
}이외에도 여러가지 속성들이 많다. CSS_animation MDN문서
-
animation-direction : animation이 끝나고, 바로 다시 시작점으로 뿅!하고 이동되게 할지 다시 왔던길 돌아가게 할지. 시작방향도 정해줄 수 있음. animation-direction_MDN
-
animation-fill-mode : animation이 끝나고, 돌아가는 게 아니라, 이동한 위치에 있게 해주는 등. animation-fill-mode_MDN
-
animation-play-state : 중간에 멈추게 하는 등
animation-play-state_MDN
박스에 마우스가 올라가면 멈추게 끔 하려면
.box{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: #fff000;
border: 2px solid black;
animation: sample-ani 5s alternate infinite;
}
.box:hover{
animation-play-state: paused;
}
그러면, 한번 마우스를 올리면 영원히 멈춰있게 하려면 어떻게 해야할까?
이때는 자바스크립트를 사용해 css속성을 바꿔주는 게 필요하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes sample-ani{
0% {
}
50%{
transform: translate(120px);
background-color: red;
}
100% {
transform: translate(200px, 600px);
background-color: white;
}
}
.box{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: #fff000;
border: 2px solid black;
animation: sample-ani 5s alternate infinite;
}
</style>
</head>
<body>
<script>
// animation을 멈추는 함수
function pauseAnimation() {
const box = document.querySelector('.box');
box.style.animationPlayState = 'paused';
}
// animation을 다시 실행시키는 함수
function resumeAnimation() {
const box = document.querySelector('.box');
box.style.animationPlayState = 'running';
}
</script>
<div class="box" onmouseover="pauseAnimation()" >BOX</div>
</body>
</html>
주님 감사드립니다! 아멘!
