I want a Call active animation for a project of mine. I have created one but am not 100% satisfied with its animation. I am pasting my code here please help me create a nice call active animation. If you guys have any other animation suggestion please do fire away.ty Cheers.!
What I want is animation denoting that the user is talking to another person.
.rc_side_phone {
display: inline-block;
font-size: 34px;
width: 38px;
height: 40px;
background: rgba(94, 178, 2, 0.56);
color: #fff;
line-height: 40px;
border-radius: 7px;
background: #4CAF50;
margin-left: 11px;
margin-top: 8px;
}
.rc_side_phone i {
line-height: 45px;
margin-left: 4px;
}
.rc_side_phone:after {
position: absolute;
content: '';
border-right: 2px solid #ffffff;
width: 10px;
left: 34px;
top: 28px;
height: 12px;
border-radius: 50%;
z-index: 9;
transform: rotate(-44deg);
-webkit-transform: rotate(-44deg);
animation: onCall 1s steps(5) infinite;
-webkit-animation: onCall 1s steps(5) infinite;
animation-delay: 0s;
}
.rc_side_phone:before {
position: absolute;
content: '';
border-right: 2px solid #ffffff;
width: 16px;
left: 33px;
top: 23px;
height: 17px;
border-radius: 50%;
z-index: 9;
transform: rotate(-44deg);
-webkit-transform: rotate(-44deg);
animation: onCallTwo 1s steps(10) infinite;
-webkit-animation: onCallTwo 1s steps(10) infinite;
/* animation-delay: 1.5s; */
}
@keyframes onCall {
0% {
width: 10px;
left: 34px;
top: 28px;
height: 12px;
}
100% {
width: 18px;
left: 31px;
top: 24px;
height: 19px;
}
/*100%{width: 10px;left: 34px;top: 28px;height: 12px;}*/
}
@-webkit-keyframes onCall {
0% {
width: 10px;
left: 34px;
top: 28px;
height: 12px;
}
100% {
width: 18px;
left: 31px;
top: 24px;
height: 19px;
}
}
@keyframes onCallTwo {
0% {
width: 16px;
left: 33px;
top: 23px;
height: 17px;
}
100% {
width: 18px;
left: 35px;
top: 18px;
height: 23px;
}
}
@-webkit-@keyframes onCallTwo {
0% {
width: 16px;
left: 33px;
top: 23px;
height: 17px;
}
100% {
width: 18px;
left: 35px;
top: 18px;
height: 23px;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="rc_side_phone">
<i class="fa fa-phone"></i>
</span>