CSS phone ringng animation - html

Question

I want to have my font awesome icon "ring" each 1 seconds, by ring I mean having a css animation which makes the phone look like if it where ringing (maybe a brief rotation with transform origin center?), I'm a noob with css animations:
<div style="width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; background-color:white;"><i class="LAYOUTnav7_links_button_icon fa fa-phone fs_bigger main"></i></div>
Any help?

Answer 1

You can use animation and keyframes to do this, here is an example:
.phone {
display:block;
width: 60px;
height: 60px;
font-size: 40px;
margin:50px auto 0;
color: #9e9e9e;
animation: ring 4s .7s ease-in-out infinite;
transform-origin: 50% 4px;
}
#keyframes ring {
0% { transform: rotate(0); }
5% { transform: rotate(30deg); }
10% { transform: rotate(-28deg); }
15% { transform: rotate(34deg); }
20% { transform: rotate(-32deg); }
25% { transform: rotate(30deg); }
30% { transform: rotate(-28deg); }
35% { transform: rotate(26deg); }
40% { transform: rotate(-24deg); }
45% { transform: rotate(22deg); }
50% { transform: rotate(-20deg); }
55% { transform: rotate(18deg); }
60% { transform: rotate(-16deg); }
65% { transform: rotate(14deg); }
70% { transform: rotate(-12deg); }
75% { transform: rotate(10deg); }
80% { transform: rotate(-8deg); }
85% { transform: rotate(6deg); }
90% { transform: rotate(-4deg); }
95% { transform: rotate(2deg); }
100% { transform: rotate(-1deg); }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div>
<span class="phone fa fa-phone"></span>
</div>