Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - creating a both side radio wave animation

0 votes
141 views
in Technique[技术] by (71.8m points)

javascript - creating a both side radio wave animation

I want a Radar wave animation like this:

enter image description here

With a lot of effort using my poor knowledge of Svgs I added the left side of the desired wave and it works fine. but I need some help to add the right side with a proper solution.

Note: if you know any source code or any better solution to achieve such animation which is simpler than mine please fell free to notify me.

Note 2: I need a function to initiate the animation.

Thanks in advance.

function Wave() {
  const waves = document.querySelectorAll(".radio-wave");
  waves.forEach(wave => wave.classList.add('add-wave'));
  
  const wave1 = document.querySelector(".radio-wave-1");
  wave1.classList.add('add-radio-wave-1');
  
  const wave2 = document.querySelector(".radio-wave-2");
  wave2.classList.add('add-radio-wave-2');
  
  const wave3 = document.querySelector(".radio-wave-3");
  wave3.classList.add('add-radio-wave-3');
  
  const wave4 = document.querySelector(".radio-wave-4");
  wave4.classList.add('add-radio-wave-4');
  
  const wave5 = document.querySelector(".radio-wave-5");
  wave5.classList.add('add-radio-wave-5');
  
  const wave6 = document.querySelector(".radio-wave-6");
  wave6.classList.add('add-radio-wave-6');
  
  
}

setTimeout(() => Wave(), 2000);
body {
  background: black;
}

.left-wave-container {
  position: relative;
  margin-right: 50%;
  padding: 0;
  font-size: 16px;
}

.radio-wave-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 5rem;
}

.radio-wave-container.content {
  flex-flow: row nowrap;
  width: 100%;
}

.radio-source {
  position: absolute;
  right: 2rem;
  width: 2rem;
  fill: #fcba03;
}

.add-wave {
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.radio-wave {
  position: absolute;
  right: 2rem;
  stroke-linecap: round;
  stroke-width: 4;
  stroke: #fcba03;
  fill: none;
  transform: scale(0.2) translateX(150%);
  opacity: 0;
  width: 5rem;
  height: 5rem;
}

.add-radio-wave-1 {
  -webkit-animation-name: wave-1;
          animation-name: wave-1;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes wave-1 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-1 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-2 {
  -webkit-animation-name: wave-2;
          animation-name: wave-2;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

@-webkit-keyframes wave-2 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-2 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-3 {
  -webkit-animation-name: wave-3;
          animation-name: wave-3;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes wave-3 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-3 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-4 {
  -webkit-animation-name: wave-4;
          animation-name: wave-4;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

@-webkit-keyframes wave-4 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-4 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-5 {
  -webkit-animation-name: wave-5;
          animation-name: wave-5;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

@-webkit-keyframes wave-5 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-5 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-6 {
  -webkit-animation-name: wave-6;
          a

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Accessing elements wave1..wave6 should be like querySelectorAll:

const wave1 = document.querySelectorAll(".radio-wave-1");
...
const wave6 = document.querySelectorAll(".radio-wave-6");

Because this is a collection.

Next, I applied a for loop, specifying 2 as index to add a class for each wave1..wave6.

Also, I decided to correct your html and css layout. If you want your waves to be in the picture that you showed, then you need to do the following:

Use flex to align with each other. Add this to your css:

.wave-container {
    display: flex;
    justify-content: center;
}

And remove rule margin-right: 50% from .left-wave-container and .right-wave-container selectors.

Now it's done!

function Wave() {
  const waves = document.querySelectorAll(".radio-wave");
  const wave1 = document.querySelectorAll(".radio-wave-1");
  const wave2 = document.querySelectorAll(".radio-wave-2");
  const wave3 = document.querySelectorAll(".radio-wave-3");
  const wave4 = document.querySelectorAll(".radio-wave-4");
  const wave5 = document.querySelectorAll(".radio-wave-5");
  const wave6 = document.querySelectorAll(".radio-wave-6");

  waves.forEach(function(wave) {
    wave.classList.add('add-wave');

    for (var i = 0; i < 2; i++) {    
      wave1[i].classList.add('add-radio-wave-1'); 
      wave2[i].classList.add('add-radio-wave-2');  
      wave3[i].classList.add('add-radio-wave-3'); 
      wave4[i].classList.add('add-radio-wave-4'); 
      wave5[i].classList.add('add-radio-wave-5'); 
      wave6[i].classList.add('add-radio-wave-6');  
    }  
  });
}

setTimeout(() => Wave(), 2000);
body {
  background: black;
}

.wave-container {
    display: flex;
    justify-content: center;
}

.left-wave-container {
  position: relative;
  /*margin-right: 50%;*/
  padding: 0;
  font-size: 16px;
}

.right-wave-container {
  position: relative;
  /*margin-right: 50%;*/
  padding: 0;
  font-size: 16px;
  transform: rotate(180deg); /* flip the animation*/
}

.radio-wave-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 5rem;
}

.radio-wave-container.content {
  flex-flow: row nowrap;
  width: 100%;
}

.radio-source {
  position: absolute;
  right: 2rem;
  width: 2rem;
  fill: #fcba03;
}

.add-wave {
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.radio-wave {
  position: absolute;
  right: 2rem;
  stroke-linecap: round;
  stroke-width: 4;
  stroke: #fcba03;
  fill: none;
  transform: scale(0.2) translateX(150%);
  opacity: 0;
  width: 5rem;
  height: 5rem;
}

.add-radio-wave-1 {
  -webkit-animation-name: wave-1;
          animation-name: wave-1;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes wave-1 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-1 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-2 {
  -webkit-animation-name: wave-2;
          animation-name: wave-2;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

@-webkit-keyframes wave-2 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-2 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-3 {
  -webkit-animation-name: wave-3;
          animation-name: wave-3;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes wave-3 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-3 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-4 {
  -webkit-animation-name: wave-4;
          animation-name: wave-4;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

@-webkit-keyframes wave-4 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-4 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-5 {
  -webkit-animation-name: wave-5;
          animation-name: wave-5;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

@-webkit-keyframes wave-5 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-5 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...