Set "call active" animation using only CSS - css

Question

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>

Answer 1

If you are looking for an incoming call animation, What about this?:
UPDATE:
I have added the active call animation to the snippet
UPDATE2:
Added wave animation, and linear wave animation
body {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
}
.ringing_phone,
.active_phone,
.active_phone2 {
display: inline-block;
color: #fff;
border-radius: 50%;
background: #4CAF50;
padding: 5px;
width: 50px;
height: 50px;
text-align: center;
position: relative;
margin: 0 10px;
}
.ringing_phone i,
.active_phone i,
.active_phone2 i {
line-height: 50px;
font-size: 2.25em;
}
.ringing_phone i {
animation: shake 2s infinite cubic-bezier(.36, .07, .19, .97) both;
}
.active_phone:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
padding: 0.5em;
animation: activeCall 2s ease-in-out infinite both;
}
.active_phone2:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
z-index: 11;
transform: translate3d(0, 0, 0);
}
.active_phone:before,
.active_phone2:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: activeCall2 4s linear infinite both;
}
.ringing_phone:after,
.ringing_phone:before {
position: absolute;
content: '';
opacity: 0;
border-right: 2px solid #ffffff;
width: 15px;
height: 15px;
left: 40%;
top: 28%;
border-radius: 50%;
transform: rotate(-40deg);
animation: fadeInOne 2s infinite both;
}
.ringing_phone:before {
width: 20px;
height: 20px;
left: 40%;
top: 20%;
animation: fadeInTwo 2s infinite both;
}
.active_phone2 i {
z-index: 10;
position: relative;
}
.active_phone2 .cover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
border-radius: 50%;
}
.wave,
.wave2 {
opacity: .4;
position: absolute;
top: 25%;
left: -15%;
background: white;
width: 130%;
height: 130%;
transform-origin: 50% 48%;
border-radius: 45%;
animation: drift 3000ms infinite linear;
opacity: 0.2;
}
.wave2 {
background: none;
border-radius: 35%;
top: 40%;
border: 2px solid white;
}
.wave2.two {
animation: drift 7000ms infinite linear;
opacity: 0.1;
top: 42%;
}
.wave2.three {
animation: drift 5000ms infinite linear;
opacity: 0.05;
top: 44%;
}
.wave.two {
animation: drift 7000ms infinite linear;
top: 30%;
opacity: 0.1;
}
.wave.three {
animation: drift 5000ms infinite linear;
opacity: 0.05;
top: 35%;
}
#keyframes drift {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes activeCall {
20% {
padding: 1em;
}
25% {
padding: 0.5em;
}
35% {
padding: 1.5em;
}
50% {
padding: 1em;
}
60% {
padding: 1.55em;
}
80% {
padding: 0.7em;
}
100% {
padding: 0.5em;
}
}
#keyframes activeCall2 {
0% {
padding: 0em;
background-color: rgba(76, 175, 80, 0);
}
25% {
padding: 1em;
background-color: rgba(76, 175, 80, 0.5);
transform: translateX(-1em) translateY(-1em);
}
26%,
100% {
padding: 0;
opacity: 0;
}
}
#keyframes shake {
5%,
45% {
transform: rotate3d(0, 0, 1, -7deg);
}
10%,
40% {
transform: rotate3d(0, 0, 1, 7deg);
}
15%,
25%,
35% {
transform: rotate3d(0, 0, 1, -7deg);
}
20%,
30% {
transform: rotate3d(0, 0, 1, 7deg);
}
51% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(0, 0, 0, 0deg);
}
}
#keyframes fadeInOne {
45% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fadeInTwo {
55% {
opacity: 0
}
100% {
opacity: 1
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<h5>Active call v3</h5>
<span class="active_phone2">
<i class="fa fa-phone"></i>
<span class="cover">
<span class='wave2 one'></span>
<span class='wave2 two'></span>
<span class='wave2 three'></span>
</span>
</span>
</div>
<div>
<h5>Active call v2</h5>
<span class="active_phone2">
<i class="fa fa-phone"></i>
<span class="cover">
<span class='wave one'></span>
<span class='wave two'></span>
<span class='wave three'></span>
</span>
</span>
</div>
<div>
<h5>Active call</h5>
<span class="active_phone">
<i class="fa fa-phone"></i>
</span>
</div>
<div>
<h5>Incoming call</h5>
<span class="ringing_phone">
<i class="fa fa-phone"></i>
</span>
</div>

Answer 2

If you add opacity on your key frames, I think it will be more cute.
Jsfidde: https://jsfiddle.net/e6Lvsrk1/
.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;
opacity:0;
}
100% {
width: 18px;
left: 31px;
top: 24px;
height: 19px;
opacity:1
}
/*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;
opacity:1
}
100% {
width: 18px;
left: 35px;
top: 18px;
height: 23px;
opacity:0;
}
}
#-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>

Answer 3

I slightly modified your original version, giving it a shorter animation time, alternating it, and animating without steps.
.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;
-webkit-transform: rotate(-44deg);
transform: rotate(-44deg);
-webkit-animation: onCall 0.5s infinite alternate;
animation: onCall 0.5s infinite alternate;
}
.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;
-webkit-transform: rotate(-44deg);
transform: rotate(-44deg);
-webkit-animation: onCallTwo 0.5s infinite alternate;
animation: onCallTwo 0.5s infinite alternate;
}
#-webkit-keyframes onCall {
0% {
width: 10px;
left: 34px;
top: 28px;
height: 12px;
}
100% {
width: 18px;
left: 31px;
top: 24px;
height: 19px;
}
}
#keyframes onCall {
0% {
width: 10px;
left: 34px;
top: 28px;
height: 12px;
}
100% {
width: 18px;
left: 31px;
top: 24px;
height: 19px;
}
}
#-webkit-keyframes onCallTwo {
0% {
width: 16px;
left: 33px;
top: 23px;
height: 17px;
}
100% {
width: 18px;
left: 35px;
top: 18px;
height: 23px;
}
}
#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>