728x90

목록animation-timing-function (1)

디자인과 개발 그 사이

animation-timing-function: ease, linear, ease-in, ease-out, ease-in-out 비교하기

비교예시 아래의 코드에서는 빨간색 사각형들이 오른쪽으로 200px 이동하는 애니메이션을 사용하여 ease, linear, ease-in, ease-out, ease-in-out 다섯 가지 animation-timing-function 값으로 비교하고 있습니다. html ease linear ease-in ease-out ease-in-out css .box { width: 100px; height: 100px; margin: 20px; background-color: red; animation-duration: 2s; animation-iteration-count: infinite; animation-fill-mode: forwards; } .ease { animation-name: move-ease; ..
css 2023. 7. 31. 14:00
이전 Prev 1 Next 다음
728x90