반응형
< CSS transform와 transition >
.move {
transform: translate(300px, 300px);
transition-property: all;
transition-duration: 2s;
transition-delay: 1s;
}
transition : transform만으로는 요소의 변형을 일으킬 뿐 움직이는 동적인 효과를 주기 위해 사용
transition-property - 동적인 효과를 적용할 프로퍼티를 지정 (가로길이, 세로길이 등)
transition-duration : 동적인 효과가 진행되는 시간을 지정
transition-delay : transition 요청을 받은 후 실제 실행할 때까지 지연시간을 설정
< 다중 애니메이션 사용법 >
.test {
animation-name: first-ani, second-ani;
animation-duration: 5s, 1500ms;
animation-delay: 500ms, 1000ms; }
이름을 같이 써주면 사용 가능.
< 예제 1,2 >
(1) html 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
<meta charset="UTF-8" />
<title>Test</title>
</head>
<body>
<div class="table">
<div class="circle" id="left"></div>
<div class="circle" id="center"></div>
<div class="circle" id="right"></div>
</div>
<script
src="https://kit.fontawesome.com/6478f529f2.js"
crossorigin="anonymous"
></script>
<script src="test.js"></script>
</body>
</html>
(2) css 코드
@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Montserrat&display=swap");
body {
font-family: "Audiowide", cursive;
font-family: "Montserrat", sans-serif;
background-color: gray;
color: rgb(155, 153, 153);
}
.circle {
display: flex;
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
}
.table {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 10%;
padding-right: 10%;
box-sizing: border-box;
padding-top: 25%;
}
.change {
animation: changecolor 0.5s linear forwards;
}
.fade {
animation: fadeout 0.5s linear forwards;
}
.move1 {
transform: translateX(560px);
transition-property: all;
transition-duration: 2s;
}
.move2 {
transform: translateX(-560px);
transition-property: all;
transition-duration: 2s;
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes changecolor {
from {
background-color: red;
}
to {
background-color: royalblue;
}
}
(3) javascript 코드
const left_c = document.querySelector("#left");
const center_c = document.querySelector("#center");
const right_c = document.querySelector("#right");
var num = 1;
function centerHover(){
if(num == 1)
{
left_c.classList.add("fade");
right_c.classList.add("fade");
center_c.classList.add("change");
}
else if(num == 2)
{
left_c.classList.add("move1");
right_c.classList.add("move2");
}
}
function init(){
center_c.addEventListener('mouseover', centerHover);
}
init();
위에서 문제 1을 실행시키고 싶다면 자바스크립트에서 num 값을 1, 문제 2을 실행시키고 싶다면 자바스크립트에서 num 값을 2로 변경해주면 됩니다. 아래는 각각 결과,
다음에 시도해보고 싶은 CSS 애니메이션 : ldrerin.tistory.com/397
CSS 애니메이션 18가지 예제
최근에 점점 더 많은 CSS 애니메이션 예제가 웹 사이트에 게재되고 있음을 눈치 챘을 것입니다 . 애니메이션은 올해 웹의 주요 트렌드였으며 아무데도가는 흔적을 보이지 않고 있습니다. 웹
ldrerin.tistory.com
반응형
댓글