jquery - 在页面加载时增长和收缩元素

标签 jquery css animation css-animations bounce

我正在尝试创建一个动画，该动画在页面加载时增长一个 html 节点，然后将其缩小到原始状态(不是一次全部缩小，而是一个很好的过渡)。目标是为对象创建一个类似气球的效果，然后将其缩小回原来的状态

我一直在尝试的解决方案是使用 Bounce.js 向我的元素添加一些关键帧动画。我对包含元素执行一个操作，对子元素执行第二个操作，这两个元素具有相同的 css 属性，但它不起作用。

下面是一个指向 JS fiddle 的链接，向您展示我一直在尝试的内容。

非常感谢关于此的任何提示:)

https://jsfiddle.net/ 

#container_one {
  width: 100px;
  height: 100px;
  margin-left: 40%;
  -webkit-animation: animation_one 3200ms linear both;
  animation: animation_one 3200ms linear both;
}
#one_box {
  width: 100px;
  height: 100px;
  margin-left: 40%;
  background-color: black;
  -webkit-animation: animation_two 1200ms linear both;
  animation: animation_two 1200ms linear both;
}
@-webkit-keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
.animation-target {
  -webkit-animation: animation_two 4200ms linear both;
  animation: animation_two 4200ms linear both;
}
@-webkit-keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
 <h1>Brand Balloon</h1>
<h3>A Social Experiment for the Digital Age</h3>
<div id="container_one">
  <div id="one_box"></div>
</div>
<script src='js/app.js'></script>

最佳答案

您可以通过 javascript 在 onload 上添加的类来触发动画。

您可能还需要将动画运行 2 次，1 次向前，1 次向后，以便它返回到原始状态。 速记是:

animation : animation_one    3200ms     linear                 both       2                   alternate;
animation : -name           -duration   -timming-fucntion     -fill-mode  -iteration-count    -direction ;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

window.onload = function() {
  document.getElementById('one_box').className = 'balloon';
  document.getElementById('container_one').className = 'balloonbis';
};
#container_one {
  width: 100px;
  height: 100px;
  margin-left: 40%;
}
#one_box {
  width: 100px;
  height: 100px;
  margin-left: 40%;
  background-color: black;
}
/* animations and class */
.balloonbis {
  -webkit-animation: animation_one 3200ms linear both 2 alternate;
  animation: animation_one 3200ms linear both 2 alternate;
}
.balloon {
  -webkit-animation: animation_two 1200ms linear both2 alternate;
  animation: animation_two 1200ms linear both 2 alternate;
}
@-webkit-keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
.animation-target {
  -webkit-animation: animation_two 4200ms linear both;
  animation: animation_two 4200ms linear both;
}
@-webkit-keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
<h1>Brand Balloon</h1>
<h3>A Social Experiment for the Digital Age</h3>
<div id="container_one">
  <div id="one_box"></div>
</div>

DEMO

关于jquery - 在页面加载时增长和收缩元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37366043/

上一篇：css - 有多少类会被认为是 'poor practice'

下一篇：html - 使用 CSS 在列表中布局图像的最佳方式

相关文章：

javascript - 如何添加类 ('overflow' );

ios - 2 秒后显示和淡化 UIImageView

javascript - 动态字典到JSON问题

当我更改选择框时，jQuery 删除 div

javascript - 如何在弹出窗口中显示日历

html - 如何自动设置宽度？

javascript - 使用 jQuery 获取多个 CSS 属性

用奇怪的值初始化的 Javascript 对象

iphone - ViewController 切换动画就像在 Path.app 中一样

xaml - 如何在 Silverlight 5 中使用 VisualStateManager 重用 Storyboard

©2024 IT工具网  联系我们