【问题标题】：Set "call active" animation using only CSS仅使用 CSS 设置“调用活动”动画
【发布时间】：2017-12-30 21:08:48
【问题描述】：

我想要一个Call active animation 用于我的项目。我创建了一个，但对它的动画不是 100% 满意。我在这里粘贴我的代码，请帮助我创建一个不错的呼叫活动动画。如果你们有任何其他动画建议，请开火。ty 干杯。！

我想要的是 表示用户正在与另一个人交谈的动画。

.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>

【问题讨论】：

这不是问题。我认为这是一个相对的情况。
是的，这不是编程方面的问题，但这是user-interface的问题
这个问题似乎更适合User Experience Stack Exchange。

标签： css user-interface animation css-transitions

【解决方案1】：

如果在关键帧上添加不透明度，我认为它会更可爱。杰斯菲德：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>

【讨论】：

TY 为您提供建议，但有任何方法可以改进其动画，使其显示speaking on the phone。我的动画我感觉更像ringing.!

【解决方案2】：

如果你正在寻找来电动画，这个呢？：

更新：

我已将活动通话动画添加到 sn-p

更新2：

添加了波浪动画和线性波浪动画

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>

【讨论】：

不是active call animation 不是incoming call animation。我想要表示用户正在与另一个人交谈的动画。
@JithinRajPR 我已经更新了我的答案，看看吧！
我喜欢你对动画所做的，你的是迄今为止我得到的最好的答案，但是你的脑海里还有什么我可以使用的想法吗？用户。？
除非您使用免提，否则正在进行的通话不是交互式的，我在成长中心 div 中重新创建了该动画
我只是想知道我们是否可以做一些类似于声波之类的东西。即使您的动画更麻烦且一致性更低，所以用户不会realize suddenly 动画正在循环自己。

【解决方案3】：

我稍微修改了你原来的版本，给它一个更短的动画时间，交替它，并且没有步骤的动画。

.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>

【讨论】：