까딱거리는 아이콘 css 애니메이션

 

 

@keyframes tilt {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.icon {
    width: 100px;
    height: 100px;
    display: block;
    margin: 50px auto;
    animation: tilt 1s ease-in-out infinite;
}

 

• 아이콘이 좌우로 자연스럽게 흔들린다.(transform:rotate(-10deg) -> rotate(10deg)
• 애니메이션은 infinite로 반복된다.
• ease-in-out을 적용해 부드러운 움직임을 준다.