본문 바로가기

WEB/내맘대로 코딩

Bounce Effect

Bounce css3 Animation

공튀기는 모션을 배너에 넣어주세요. 얼마나 걸릴까요?

2일걸린다하면 좀 오바같아서 정직하게 하루 걸립니다. 라고 했더니, 하루나 걸려요? 라고 오히려 반문하는 윗분..

얼마나 튀어오르는지 그런 오차범위 컨펌해주시는 시간 감안해서 그 정도 걸릴거 같다고 했더니, 그런거 없을거라고 해서 그럼 반나절이요. 라고 했더니 그래도 반나절 걸려요?

두시간도 많다고 느끼는 윗분.. 그냥 뚝딱하면 만들어지는 줄 아는 윗분.. ㅋㅋㅋㅋ 마치 인공지능이 코딩하는 것마냥 단순하게 생각하는 윗분..

최대한 빨리 처리해드리겠다고 하니 그제야 잘 부탁드린다고 당부하시는 윗분.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

요즘 윗분의 눈높이가 높아지다보니 요구사항도 한단계 업되는 추세다. 카카오나 네이버에서 서비스하고있는 효과를 간간히 요구하는 분위기가 지배적이라는게 현실

금융앱중에 꼴찌를 달리고있는 곳에서 윗분의 이마에 달린 3x3 eyes 희한한 요구에 시달려야하는 가여운 나는

내년에는 기필코 프론트엔드 개발자로 전직하리라 다짐하며 열심히 블로그에 삽질을 하고 있다.

공튀기는 모션

애니메이션과 관련된 속성들을 정리해보자.

  • animation-delay

    속성은 애니메이션 지연 시간을 설정합니다.

  • animation-direction

    속성은 애니메이션 움직임 방향을 설정합니다. [ normal or reverse ]

  • animation-duration

    속성은 애니메이션 움직임 시간을 설정합니다.

  • animation-fill-mode

    속성은 애니메이션이 끝난 후의 상태를 설정합니다.

    • forwards 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지
    • backwards 대상에 적용되는 즉시 첫 번째 관련 keyframe 에 정의 된 값을 적용
  • animation-iteration-count

    속성은 애니메이션 반복 횟수를 설정합니다. [ infinite or 숫자 ]

  • animation-name

    속성은 애니메이션 keyframe 이름을 설정합니다.

  • animation-play-state

    속성은 애니메이션 진행 상태를 설정합니다. [ paused or running ]

  • animation-timing-function

    속성은 애니메이션 움직임의 속도를 설정합니다.

    • linear 처음 속도와 마지막 속도가 일정합니다.
    • ease 처음엔 천천히 시작하여 빨라지고 마지막에 다시 느려집니다.
    • ease-in 천천히 시작되어 정상 속도가 됩니다.
    • ease-out 마지막에 천천히 속도를 줄여 끝납니다.
    • ease-in-out 천천히 시작되어 정상 속도가 되었다가 마지막에 느려집니다.
    • step-start 애니메이션을 시작점에서만 표현됩니다.
    • step-end 애니메이션을 끝점에서만 표현됩니다.
    • steps(int, start|end) 애니메이션을 단계별로 설정합니다.
    • cubic-bezier(n,n,n,n) 베지어 곡선값을 만들어서 속도를 설정합니다.
    • inherit 애니메이션 움직임을 상위 요소한테 상속받습니다.

'WEB > 내맘대로 코딩' 카테고리의 다른 글

Bounce Effect  (0) 2021.08.11
최악의 슬라이드 플러그인 기능구현  (0) 2021.08.10
드래그로 정렬가능한 컴포넌트  (0) 2021.01.05
셀렉트박스 url 이동  (0) 2020.12.27
일반스크롤 vs 아이스크롤  (0) 2020.12.27
깜박임 효과  (0) 2020.12.15