animation
![[CSS] 애니메이션 이미지(animation), steps를 사용해 돌아가는 공 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcjeBbP%2Fbtq8v9uAgCV%2FQzHh5qkT4KvumFfIiiRVU0%2Fimg.gif)
[CSS] 애니메이션 이미지(animation), steps를 사용해 돌아가는 공 만들기
아래와 같이 동그라미 6개가 이어진 형태인 이미지를 차례로 출력하는 실습을 해보았다. 나는 단순히 동그라미 색상만 다르게 설정했지만, 이를 응용해서 그림을 넣거나 하면 간단하지만 재미있는 애니메이션 효과를 볼 수 있다. 이미지를 불러올 rainbow 클래스를 생성하였다. 이미지를 표출할 크기를 설정하고, 이미지 경로를 연결하였다. .rainbow { width: 150px; height: 150px; background: url('images/rainbow_ball.png') no-repeat 0 0 / auto 150px; animation: rainbow-ani 5s infinite steps(6); } background 슬래시(/)는 background-size 속성을 위해 다른 속성과 구분하는 ..
![[CSS] 움직이는 요소, 애니메이션 만들기: animation, @keyframes](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fchj1EW%2Fbtq8qULB1j5%2F679W3pNNEmY39bwmHsu9m0%2Fimg.gif)
[CSS] 움직이는 요소, 애니메이션 만들기: animation, @keyframes
CSS3에서 지원하는 애니메이션 효과! animation 애니메이션 효과를 적용하기 위해 애니메이션에 대한 키프레임(@keyframes)을 정의해야 한다. 키 프레임의 from에 처음 스타일을 정의하고, to에 마지막 스타일을 정의한다. 또는 %를 이용해 세부적으로 스타일을 정의할 수 있다. (시작인 0% ~ 종료인 100%) 예시 0의 위치에서 100px로 움직이는 모션 실행 @keyframes box-ani { from { transform: translate(0, 0); } to { transform: translate(100px, 100px); } } .box { display: flex; align-items: center; justify-content: center; width: 200px; ..