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

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

转载作者：行者123 更新时间：2023-11-28 16:17:54

我正在尝试创建一个动画，该动画在页面加载时增长一个 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/

文章推荐： ios - 子类化 JSQMessages 以添加 messageID 属性

文章推荐： regex - 为什么这个 Swift RegEx 匹配 "e1234"？

文章推荐： css - 有多少类会被认为是 'poor practice'

文章推荐： html - 带有图像的响应式 4 到 2 列网站

Scalacheck 收缩
我对 ScalaCheck(以及整个 Scala)相当陌生，所以这可能是一个相当简单的解决方案我正在使用 ScalaCheck 为 AST 生成测试并验证编写器/解析器是否工作。我有这些文件 AST
java - Java中JTextArea的自动动态扩展/收缩
我首先创建一个特定大小的 JTextArea。用户可以在其中添加文本，但如果它变得太长(垂直或水平)，它将被截断。我希望 JTextArea 自动扩展或收缩(用于删除文本)。我将来可能会允许用户更改
html - 如何在浏览器调整大小时保持元素数量/收缩
我正在学习如何在浏览器更改大小时调整 div 元素的大小。我希望我的 slider (参见 Fiddle)始终显示 10 张幻灯片，即使浏览器变小(参见下图)也是如此。目标: 我能想到的实现这一点的
html - CSS 收缩
嗨，我在使用 css 面板时遇到了一些问题，我有点想寻求帮助，我的代码运行良好，但是如果用户让浏览器缩小尺寸，面板就会出现在文本下面，这就是我的意思意思是: 这是正常浏览器大小下的样子: 如果用户将浏
algorithm - 事件轮廓的贪心算法——收缩
我正在研究和实现事件轮廓的贪婪算法，如 Donna Williams 的论文 - 事件轮廓和曲率估计的快速算法中所述。与另一种实现(Kass 等人的实现)相比的优势之一应该是沿等高线曲线的点均匀分布
PHP:如何扩展/收缩 Tinyurls
在 PHP 中，如何复制 tinyurls 的扩展/收缩功能，就像在 search.twitter.com 上一样？最佳答案如果你想找出一个 tinyurl 的去向，使用 fsockopen 在端
java - 为什么没有 ZipInputStream 收缩？
有java.io.ZipInputStream膨胀和java.io.ZipOutputStream这会泄气。但有时我不希望这样。有时，当使用接受 InputStream 的第三方 API 时，我想要
java - 如何在选择文件时扩展/收缩 JTextField
我试图做到这一点，以便在选择文件后，显示文件路径的文本字段会自动收缩/扩展以适合路径。 JFileChooser fileChooser = new JFileChooser(); if (fileC
flexbox - 如何防止 flexbox 收缩？
我有两个 flexbox，它们在高度变化时收缩，嵌套内容重叠。如何防止这种情况？最佳答案 just add flex-shrink:0 to your element and the flexbo
javascript - 使用css3，如何使表格行缓慢扩展/收缩？
想要逐渐“打开”和“关闭”表格中的行，适本地向下推或拉起下面的行。我能够通过使用 transition 进行计时和使用 transform 进行大小调整来使 div 扩展/收缩(无法使用 heigh
php - mysql 收缩 where 子句
我有一个10列24行的表，可以存储一个值，也可以是=0。它们被称为msg1，msg2...直到msg10。我正在编写一个查询，用 0 而不是任何字段中的特定值来更新此表。所以我写了(59是一个测试值
database - db4o:压缩/收缩
有谁知道缩小/压缩 db4o 数据库的方法吗？最佳答案压缩/收缩是什么意思？缩小现有数据库？还是要压缩数据库？其中一个角色是 defragmentation .这将释放数据库中未使用的空间。删除
css - 防止 flexbox 收缩
我正在使用 flexbox 来布局页面，因为 growing 行为很有用。但我想完全防止收缩行为。无论如何要管理这个？示例代码: This one should gr
javascript - $ ('textarea' ).rows 扩展/收缩
我是 jQuery/Javascript 的新手，甚至是通过缩小的 jQuery/Javascript 进行搜索的新手。我正在尝试重新创建我在 Materialize 框架的表单组件中找到的一些功能
mysql - SQL:按一列中相同值的数量排序，无需聚合/收缩
我有一个对象表及其类型，如下所示: objectType | object 107 Boeing 107 Airbus 323 Audi 323
android - TableLayout 行拉伸(stretch)/收缩
我正在尝试使用以编程方式构建的 TableLayout 将 20x20 表格放入 View 中。 setStretchAllColumns/setShrinkAllColumns 方法非常适合压缩所有
c++ - 删除子布局时如何让 QVBoxLayout 收缩 QDialog？
我有一个 QDialog 和一个 QVBoxLayout 控制它的高度。这个主要的 QVBoxLayout 由一个或多个 QVBoxLayout child 组成，后面是一些其他小部件。当我添加额外
html - 围绕中心 block 收缩 anchor
如何缩小任意(未指定)宽度的居中图像周围的 anchor (绿色边框)？换句话说，我想要绿色边框居中的秒框，就像第一个一样。没有 float ，没有绝对定位。移除行 (A) 中心，但 anchor
java - 拉伸(stretch)/收缩 Canvas
我正在制作一款安卓游戏。我在 Galaxy sII 上测试我的应用程序。我取得了很大进步。不幸的是，我忽略了对其他设备进行测试。我知道我会遇到不同类型设备的不同分辨率问题。但我认为我可以通过安排我的坐
ios - 如何使 iOS 文本字体大小随屏幕大小扩展/收缩？
如果 GUI 设计人员使用特定设备屏幕尺寸作为引用点提供 iOS 设计，那么如果应用程序在不同设备上运行，如何使字体扩展或收缩？即假设设计者提供了一个以 iPhone 8 屏幕尺寸为引用的单一设计，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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