CSS에서 animation-timing-function기능이
너무 재미있어서 만들어보며 연습해보았습니다.
귀여운 우주선들로 날아가는 것을 표현했습니다.
각각 날아가는 속도나 애니메이션을 다르게하여 재미를 주었습니다.
body의 background는 파랑과 검정으로 그라데이션을 넣어주었습니다.
body {
height: 100vh;
background: linear-gradient(to right, blue, black);
}class를 space1,2,3,4로 지정해주고
<body>
<div class="space space1">
<p>1번</p>
<img src="imgs/lineship.png">
</div>
<br>
<div class="space space2">
<p>2번</p>
<img src="imgs/nolineship.png">
</div>
<br>
<div class="space space3">
<p>3번</p>
<img src="imgs/ufo1.png">
</div>
<br>
<div class="space space4">
<p>4번</p>
<img src="imgs/ufo2.png">
</div>CSS 애니메이션을 넣어주었습니다.
.space {
width: 100px;
height: 100px;
margin: 50px;
}
.space1:hover {
border-radius: 50%;
transform: translateX(600px);
transition: all 2s ease;
}
.space2:hover {
border-radius: 60%;
transform: translateX(600px);
transition: all 2s cubic-bezier(0.47, 0, 1, -0.6);
}
3번 4번은 UFO의 느낌을 주고싶어 스무스하게 갑니다.
.space3:hover {
border-radius: 50%;
transform: translateX(600px);
transition: all 2s cubic-bezier(.82, 0, .96, .2);
}
.space4:hover {
border-radius: 50%;
transform: translateX(500px);
transition: all 3s cubic-bezier(0.82, 0, .07, .87);
}transition값을 쉽게 만들어서 복사 붙여넣기 할 수 있습니다.
아래사이트로 들어가서 붉은색과 푸른색점을 움직여보세요.
(https://cubic-bezier.com/#.17,.67,.83,.67)
이리저리 움직이면서 원하는 속도를 선택한후 COPY해서 코드에 붙여넣으면 됩니다.
참고사이트
-
(https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
-
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
