본문 바로가기

CSS🔧/css&css3 애니메이션6

애니메이션 숫자 카운트 돌아가기 이렇게 숫자가 카운트 자동으로 돌아가게 하기 html 태그를 숫자 왼쪽과 오른쪽으로 나누어 class 를 공통으로 변경할수 있게 지정한다. 멈추는 숫자가 맨 위로 올수 있도록 차례대로 나열해준다. display flex 으로 배치해주면 아래로 쭉 나열됨 overflow hidden 으로 감춰준다. @keyframes moveNumber { /* transform: translateY(calc(-100% + 116px));*/ /* em 은 폰트크기를 따라가기 때문에 모바일에서 같이 줄어들도록 조정*/ /* 폰트크기를 기준으로 할 경우 */ 0% { transform: translateY(calc(-100% + 1.44em)); } 100% { transform: translateY(0); } } .mai.. 2022. 12. 21.

선 위에서 아래로 반복하기 transform-origin 방법1 선을 위애서 아래로 늘어나는 크기 조절 다시 위로 올라가는 반복 애니메이션 transform-origin: top 스케일 y를 0-1로 아래로 늘리고 transform-origin: bottom 스케일 y를 1-0으로 줄어들게한다. @keyframes scaleLine { /* 시작위치 위로 바꾸고 고정*/ 0% { transform-origin: top; } 49% { transform-origin: top; } /* 아래로 내리리며 위치 고정 */ 50% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } 0-49% 까지는 위에서 내리는것 50-10.. 2022. 12. 2.

CSS @keyframes 애니메이션 속도 다르게 주기 /* 애니메이션효과 속도 다르게 주기 */ @keyframes moveCircle { 0 { opacity: 1; } 100% { transform: translateY(-500px); opacity: 0; } } .main_visual .circle_wrap span { position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; border-radius: 50%; background: #b7ff0a; opacity: 1; animation: moveCircle 3s infinite; } 2022. 9. 29.

복합 애니메이션 @keyframes 복합애니메이션 : 여러번에 걸쳐서 동작, 자동애니메이션 적용법 @keyframes moveBox (함수명) 예시 @keyframes moveBox { 50% { transform:translateX(500px); } } 이름지정 함수명은 카멜표기법 = 동사+명사로 표현 moveBox (대문자를 두번째 명사부터) (중복불가) ex. moveBox, changeColor, fadeCover, moveBox02 % 애니메이션시간에 대한 백분율, 애니메이션시간이 1초인 경우 50%는 0.5초임 0%, 100%는 적지않을경우 최초상태 (0%로 적을시 최초위치로 적용되므로 생략한다) 속성정의 animation: name duration timing-function delay iteration-count direct.. 2022. 9. 26.

단일 애니메이션 단일애니메이션 - 한번만 동작 transition:all 또는 개별속성명 1s [지연시간] [ease] ease 처음과 끝이 느리고 중간이 빠름, 주로사용 ease-in(가속) 처음은 느리고 끝에서 빨라짐 ex. 우주선이 밖으로 나갈때 - ease-out(감속): 처음은 빠르고 끝에서 느려짐 ex. 화면밖에서 안으로 들어올때 - ease-in-out: ease와 같지만 중간속도가 ease보다 부드러움 ex. 반복애니메이션에 사용 - steps(5) ex. 타이핑 애니메이션에 사용 - cubic-bezier(1,0,0,1) /* easeInOutExpo*/ ex. 특수한 움직임 (스프링, 다이나믹한움직임)이 필요한 경우 사용 크롬개발자모드로 커스텀, https://easings.co/ 이용 - linear.. 2022. 9. 23.

애니메이션1 2022. 9. 23.

이전 1 다음

티스토리툴바