DAY #4
- 문제
👉 문제 바로가기
Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.
- 내가 만든 CHALLENGE Code
이번 문제는 첫인상이 뭔가 복잡하지 않고 쉬워보여서
쉬어가는 문제인가?! @keyframes만 잘 쓰면 쉽게 만들수 있겠지!
하고 일단 코드를 작성해 보았다..
.
.
.
- 결과물
.....🤔??
일단 되긴 됐는데....
뭔가 만족스럽지 않다....
정답지와는 다르게 자연스럽지가 않아보이고 삐걱삐걱 거리는 느낌이다..
통~! 통~! 통~! 하고 올라온 다음
쇽~! 쇽~! 쇽~! 하고 사라져야 하는데
너무 순서대로 딱딱하게 진행되는 느낌...?? 🙄? 이었다.
.
.
.
처음에는 문제를 보면서 저 원이 나오는 시간차를 animation-delay를 이용해서 구현했나?? 하고 이를 이용해 보았다.
그러나 웬걸, 타이밍이 하나도 맞지 않았다 ㅋㅋㅋ (바로 딜레이 제거!)
그래서 다음으로 생각해낸 방법이, 원이 ✨나타나고 ~ 사라지기✨ 까지의 전체 타이밍 구간을 직접 설정하는 것이었다. (노가다)
이렇게 구현하긴 했지만!! 직접 구간을 나누는건 아무래도 정확한 타이밍을 맞추기도 오래걸리고 해서...
그래서 어떤 다른 방법이 있을까 하고 서칭해보았다.
(@keyframes 타이밍만 잘쓰면 되는줄 알았지)
...
찾아보니 나는 animation-direction 속성 중 alternate 라는 속성을 사용하지 않고 있었다.
📝animation-direction 속성 중 "alternate"란?
animation-direction 속성은 애니메이션 움직임 방향을 설정하는 속성이다.
| 속성 | 설명 |
|---|---|
| normal | Default value. The animation is played as normal (forwards) |
| reverse | The animation is played in reverse direction (backwards) |
| alternate | The animation is played forwards first, then backwards |
| alternate-reverse | The animation is played backwards first, then forwards |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
출처: www.w3schools.com
이 속성을 사용하면 0% ~ 100%의 애니메이션 움직임이 순방향으로 진행된 후, 다시 역방향으로 진행된다.
그래서 이 속성을 이용하게 되면 앞서 했던 원이 ✨나타나고 ~ 사라지기✨ 까지의 모든 과정을 구현할 필요없이, 원이 나오는 과정만 구현하면 되는 것이었다!! 😲
완전 꿀팁 아닌가!!
또 새로운 내용을 알게 되었다!! 👍
이 속성을 이용해서 다시 구현해보았다!
...
&_1 {
...
animation: circle_1_alternate 2s infinite alternate; // 절반이 되었으니 2s로 줄여야함
}
&_2 {
...
animation: circle_2_alternate 2s infinite alternate;
}
&_3 {
...
animation: circle_3_alternate 2s infinite alternate;
}
...
@keyframes circle_1_alternate {
0%, 10% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes circle_2_alternate {
0%, 30% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes circle_3_alternate {
0%, 60% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
오호! 이렇게하니까 코드가 훨씬 간결해지고, 나타나고 ~ 사라지기의 모션도 대칭이 맞는것 같다!
그런데.. 정답과 아주 동일한 모션을 주고 싶어서...😬😬 (완벽주의 오기생김)
다른 속성도 더 찾아보았다.
+ 🎈추가로 공부한 것
📝 cubic-bezier 란?
cubic-bezier는 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다.
이를 설명하기엔 너무나도 긴 글이 될것 같아서 내가 참고한 링크를 첨부한다.
👉 ✨출처 바로가기✨
베지어 곡선을 제어하면 동적인 움직임을 더욱 자연스럽게 구현할 수 있다.
나는 animation-timing-function로 바꾸어 사용했다.
// 속성 추가
animation-timing-function: cubic-bezier(.21,.98,.6,.99);
위 코드들은 공부용으로 남겨두기로 하고, 100dayscss.com 에는 내 실력만으로 만든 코드를 올려놓기로 했다.
문제를 풀면 풀수록 완벽하게 구현하고싶은 욕심이 생긴다 👊👊
완벽하게 구현하는 것은 자유지만, 이러한 디테일을 챙김으로써 작업물의 완성도를 높일 수 있다고 생각한다.
끝
