자주 쓰는 CSS @keyframes 애니메이션 12종을 미리보고 코드를 복사합니다.

CSS 코드


        

    


    

        
CSS 애니메이션 사용법

        
    
            
  1. 애니메이션 종류를 선택합니다.
    2. 
            
  2. 지속시간·반복 횟수·이징을 조정합니다.
    3. 
            
  3. 미리보기에서 실시간 동작을 확인합니다.
    4. 
            
  4. 복사로 @keyframes + animation 코드를 가져갑니다.
    5. 
            
  5. 요소에 클래스로 적용합니다.
    6. 
        


        
지원 애니메이션 12종

        
    
            
  • fadeIn / fadeOut — 나타남·사라짐
    • 
            
  • bounce — 튕기기 (위 아래로)
    • 
            
  • pulse — 맥박 (커지고 작아짐)
    • 
            
  • shake — 좌우 흔들림 (오류 표시)
    • 
            
  • rotate — 회전 (로딩 스피너)
    • 
            
  • slideInLeft / slideInRight — 좌·우에서 슬라이드
    • 
            
  • zoomIn — 확대되며 나타남
    • 
            
  • flip — 카드 뒤집기
    • 
            
  • wobble — 비틀거림
    • 
            
  • heartbeat — 심장박동
    • 
        


        
활용 예시

        
    
            
  • 로딩 스피너 (rotate, pulse)
    • 
            
  • 알림·토스트 등장 (slideIn, fadeIn)
    • 
            
  • 입력 오류 흔들림 (shake)
    • 
            
  • 버튼·아이콘 강조 (heartbeat, pulse)
    • 
            
  • 모달·팝업 등장 (zoomIn, flip)
    • 
        


        
animation vs transition 차이

        
transition은 상태 변화(예: hover) 시 부드럽게 이동, animation은 키프레임으로 정의된 시퀀스를 자동 재생합니다. 한 번 효과는 transition, 반복·복잡한 동작은 animation이 적합합니다.


        
자주 묻는 질문

        

            

                animation이 너무 자주 보이면 멀미가 나요
                
접근성을 위해 @media (prefers-reduced-motion: reduce) 미디어 쿼리로 사용자가 모션 줄이기 설정 시 애니메이션을 끄세요.

            

            

                애니메이션이 부드럽지 않아요
                
opacity와 transform은 GPU 가속을 받아 부드럽지만 width/height/margin은 매 프레임 레이아웃 재계산이 일어나 끊깁니다. 가능한 transform·opacity만 사용하세요.

            

            

                animation이 끝나도 마지막 상태로 유지되려면?
                
animation-fill-mode: forwards를 추가하면 끝난 후 마지막 키프레임 상태가 유지됩니다.

            

            

                여러 애니메이션을 동시에 적용 가능?
                
가능합니다. animation: fadeIn 1s, slideInLeft 1s처럼 콤마로 구분합니다.