Programming/HTML + CSS
![[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; ..
![[CSS] 요소 크기, 회전, 위치 이동, 기울기 변경: transform](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmYIq6%2Fbtq7Q9cccdb%2FxTMlEnMY4mA1Jw4urdgJhk%2Fimg.gif)
[CSS] 요소 크기, 회전, 위치 이동, 기울기 변경: transform
CSS3에서 사용 가능하다! transform transform은 엘리먼트의 크기, 회전, 위치 등을 변경시키는 속성이다. transform-origin, scale, rotate, translate, skew에 대해 살펴보자! scale(): 확대, 축소 transform: scale(x축 크기, y축 크기) transform: scaleX(x축 크기) transform: scaleY(y축 크기) .box-container { display: flex; } .box { width: 200px; height: 200px; border: 2px solid black; background-color: rgba(255, 255, 0, 0.7); /* 부드럽게 움직이는 효과 */ transition: 1s; }..