STYLE SHEET/Animation

CSS @Keyframes 복습

css keyframes을 이용한 마을꾸미기 해봤습니다! @import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap'); /* reset.css */ *{ margin: 0px; padding: 0px; box-sizing: border-box; } body { width: 100%; height: 100vh; overflow: hidden; animation: sky linear 20s infinite; } section { width: 1000px; height: 400px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -500px; ..

CSS Animation - @keyframes, steps

Css Animation frame by frame Image Sprite 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다 정사각형의 영역만 div에서 보여주고 뒤에 백그라운드 이미지를 서로 간격만큼 씩 이동시키면서 표현할 수 있다 무료 스프라이트 이미지 사이트 보통 해상도가 2배 넘는 이미지를 다운받고 코드에는 반으로 나눠서 작성한다 그 이유는 웹사이트상에서 더 깔끔하게 보이기 위함 .spaceship { width: 150px; height: 150px; background: url('./img.png') no-repeat 0 0 /; } 현재 내가 다운받은 이미지는 크기는 가로 5100, 세로 300이다 보통은 계산기나 머릿속으로 나누기 2를 생각해서 지정하면 되지만 좀 더 ..

CSS Animation - linear, forwards

Animation #1에서 배운 박스를 자연스럽게 왔다갔다하기 animation: ani 3s infinite alternate; 반대 방향에서 시작하기 animation: ani 3s infinite reverse; animation: ani 3s linear; 기본 속성으로 돌아온 뒤 다시 적용하면 박스가 한번 움직이고 첫 스타트 지점으로 되돌아오고 끝나게된다 만약 스타트 지점이 아닌 마지막 지점에 멈추게 할 땐 forwards 속성을 사용한다 animation: ani 3s linear forwards; 박스에 마우스를 가져다 댔을 때 일시정지를 할 수 있게 속성을 지정할 수 있다 .box:hover { animation-play-state: paused; }

CSS Animation

css로 애니메이션을 만들 수 있는 방법은 크게 두가지인데 transition 과 animation이 있다 Animation box .box { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); } Animation 은 다른 속성과 다르게 keyframes을 추가할 수 있다 keyframes란, 어떤 오브젝트가 오른쪽에서 아래로 향하는 방향을 지정할 때 지정하는 방향을 keyframes으로 설정할 수 있다 keyframes을 지정할 땐 시작점과 끝점을 생각하고 지정해야한다 0% ~ 100..