👉서서히 변하는 애니메이션 keyframes 안녕하세요 TriplexLab 입니다. 오래간만에 HTML+SCSS(CSS3)에 글을 작성하네요:D keyframes를 사용해서 서서히 변하는 애니메이션을 만들어 보겠습니다. *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; align-items: center; justify-items: center; margin: 0; background-color: #000; } div { width: 300px; height: 300px; border-radius: 50%; box-shadow: 0 0 20px #fff, -20px 0 80..

🌊 wave keyframes로 만들기 안녕하세요 TriplexLab입니다. 오늘은 css에서 animation사용해서 wave를 직접 만드는 것을 소개하겠습니다. ✍️ wave_custom 코드 @keyframes wave{0%{margin-left:0}100%{margin-left:-3056px}} @keyframes swell{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-30px,0)}} .inner .tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ocean { width: 100%; position: fixed; botto..