웹 사이트를 보던 중 좌우로 흔들리는 종 아이콘이 재밌어 보여서 만들어 봤습니다.
transform-origin이 구현에 가장 중요한 부분이라고 생각합니다.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
i{
transform-origin: 50% 0%;
animation-name: shake;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0.5s;
}
@keyframes shake{
0%{
transform: rotate(0deg);
}
10%{
transform: rotate(45deg);
}
20%{
transform: rotate(-45deg);
}
30%{
transform: rotate(30deg);
}
40%{
transform: rotate(-30deg);
}
50%{
transform: rotate(10deg);
}
60%{
transform: rotate(-10deg);
}
70%{
transform: rotate(0deg);
}
100%{
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<h1>fa fa-bell</h1>
<i class="fa fa-bell"></i>
<i class="fa fa-bell" style="font-size:24px"></i>
<i class="fa fa-bell" style="font-size:36px"></i>
<i class="fa fa-bell" style="font-size:48px;color:red"></i>
<br>
</body>
</html>
See the Pen VweQVgZ by bjj3036 (@bjj3036) on CodePen.