javascript - 如何实现以下视频的动画效果？

Question

我正在寻找链接中显示的动画。

帮我找出这里使用了哪种类型的动画。

提前感谢任何帮助。

下面是动画链接。

https://d26dzxoao6i3hh.cloudfront.net/items/2E32111m260Z0x0V3H2R/Animation%202%20-%20Chat.mp4

请检查上面的视频动画。请给我建议来实现这种类型的动画。

我用于此的 html 和 css 代码是

var who_array = ["Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States"];
var what_array = ["Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport"];
var when_array = ["About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago"];
var map_url_array = ["https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png"];
var saleproof_array = ["By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof"];
var index_array = Array.apply(null, {
  length: who_array.length
}).map(Number.call, Number);
var delay = 1000;
var milisecs_hiding = 10 * 1000 - delay;
var milisecs_to_start = 3 * 1000 - delay;

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

function refresh_bubble(step) {
  document.getElementById('who').innerHTML = who_array[index_array[step]];
  document.getElementById('what').innerHTML = what_array[index_array[step]];
  document.getElementById('when').innerHTML = when_array[index_array[step]];
  //document.getElementById('viewproduct').innerHTML = viewproduct_array[index_array[step]];
  document.getElementById('saleproof').innerHTML = saleproof_array[index_array[step]];
  document.getElementById('static-image').src = map_url_array[index_array[step]];
  setTimeout(function() {
    $("#proof-popup").fadeIn(250);
    setTimeout(function() {
      popdown_bubble(step);
    }, 7000);
  }, delay);
}

function popdown_bubble(step) {
  document.getElementById('proof-popup').className = 'bounceBottom-leave-active bottom-right';
  setTimeout(function() {
    if (step < (who_array.length - 1)) {
      refresh_bubble(step + 1);
    } else {
      index_array = shuffle(index_array);
      refresh_bubble(0);
    }
  }, milisecs_hiding);
}

setTimeout(function() {
  index_array = shuffle(index_array);
  refresh_bubble(0);
}, milisecs_to_start);

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:Roboto:400,600,800";
#proof-popup.bottom-right {
  right: 0px;
}

#proof-popup.bottom-left {
  left: 0px;
}

#proof-popup {
  display: none;
  border: none;
  background: transparent;
  z-index: 999998;
  position: fixed;
  bottom: 20px;
  margin: 0px 20px;
}

#proof-popup.hide-proof {
  // visibility: hidden;
  // opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.4s linear
}

#proof-popup .md.bubble {
  width: 345px;
}

#proof-popup .bubble {
  padding: 5px;
  margin: 0 auto;
  min-height: 70px;
  margin: 0 auto;
  box-shadow: 0px 0px 56px -8px rgba(228, 228, 228, 1);
  border: 1px solid #e4e4e4;
  background: #fff;
  float: none;
  border-radius: 4px;
}

#proof-popup .bubble .content {
  margin-top: -10px;
  float: left;
  width: 77%;
  position: relative;
  font-size: 10px;
}

#proof-popup .bubble h2.who {
  margin: 0 0 3px;
}

#proof-popup .content h2 a {
  font-size: 14px;
  margin: 0px;
  color: #000;
  font-weight: bolder;
  font-family: Roboto;
  letter-spacing: normal;
  text-decoration: none;
}

#proof-popup .bubble .what {
  font-family: Roboto;
  font-size: 13.2px;
  color: #000;
  width: 100%;
  margin: 0 0 8px;
  font-weight: bold;
}

#proof-popup .bubble .when {
  color: #000;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 800;
}

#proof-popup .img_inner {
  float: left;
  width: 55px;
  height: auto !important;
  background: #fff;
  padding: 9px 5px;
  border: 1px solid rgba(63, 63, 68, .15);
  overflow: hidden;
  margin-right: 7px;
}

#proof-popup .notif_img {
  display: block;
  text-align: center;
}

#proof-popup .img_inner img {
  overflow: hidden;
  max-height: 100%!important;
}

#proof-popup .img-responsive {
  max-width: 100%;
  height: auto;
}

#proof-popup .bubble button.close {
  -webkit-appearance: none;
  cursor: pointer;
  background: 0 0;
  border: 0;
}

#proof-popup .bubble .close {
  float: right;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
}

#proof-popup .bubble .last_one {
  padding-top: 0px !important;
  display: flex;
  margin-right: 34px;
  justify-content: space-between;
}

#proof-popup .bubble .last_one {
  float: left;
  width: 100%;
}

#proof-popup .bubble .last_one a {
  color: #000;
  font-weight: 600;
  text-transform: capitalize;
  font-size: 10px;
}

#proof-popup .bubble .circle_empty {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #acacac;
  float: left;
  margin: 4px 5px 0 0;
}

#proof-popup .bubble .sale-proof-text {
  color: #000;
  display: inline-block;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 800;
}

#proof-popup .saleproof-img {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}

.bounceBottom-enter-active {
  animation: bounceBottomUp 1.1s linear both;
}

@keyframes bounceBottomUp {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 100);
  }
  4.1% {
    transform: matrix(1, 0, 0, 1, 0, 41.971);
  }
  8.11% {
    transform: matrix(1, 0, 0, 1, 0, 10.549);
  }
  12.11% {
    transform: matrix(1, 0, 0, 1, 0, -1.843);
  }
  16.12% {
    transform: matrix(1, 0, 0, 1, 0, -4.336);
  }
  27.23% {
    transform: matrix(1, 0, 0, 1, 0, -.784);
  }
  38.34% {
    transform: matrix(1, 0, 0, 1, 0, .104);
  }
  60.56% {
    transform: matrix(1, 0, 0, 1, 0, -.002);
  }
  82.78% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

.bounceBottom-leave-active {
  animation: bounceBottomDown 1.1s linear both;
}

@keyframes bounceBottomDown {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  4.2% {
    transform: matrix(1, 0, 0, 1, 0, 54.927);
  }
  8.31% {
    transform: matrix(1, 0, 0, 1, 0, 88.411);
  }
  12.51% {
    transform: matrix(1, 0, 0, 1, 0, 103.215);
  }
  16.62% {
    transform: matrix(1, 0, 0, 1, 0, 106.331);
  }
  27.73% {
    transform: matrix(1, 0, 0, 1, 0, 101.285);
  }
  38.84% {
    transform: matrix(1, 0, 0, 1, 0, 99.747);
  }
  61.06% {
    transform: matrix(1, 0, 0, 1, 0, 100.01);
  }
  83.28% {
    transform: matrix(1, 0, 0, 1, 0, 100);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 100);
  }
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<!-- THIS GOES BEFPRE </BODY> -->
<div id="proof-popup" class="hide-proof">
  <div class="md bubble">
    <div class="img_inner">
      <a class="notif_img"><img id="static-image" src="" class="img-responsive"></a>
    </div>
    <button class="close" type="button" data-dismiss="modal">&#10006;</button>
    <div class="content">
      <h2 class="who">
        <a id="who" href=""></a>
      </h2>
      <p class="what" id="what"></p>
      <div class="last_one">
        <div class="when" id="when"></div>
        <div style="display: inline-flex;">
          <img class="saleproof-img" src="https://scaleapps.net/saleproof-dev/verified.png">
          <span class="saleproof sale-proof-text" id="saleproof"></span>
        </div>
      </div>
    </div>
  </div>
</div>

标签： javascriptcssanimationeffect