CSS 动画屏幕响应

Question

我正在尝试让这个 CSS 动画在不同的屏幕尺寸下响应，我为 1366 x 768 屏幕尺寸创建了它，如何让它适合所有屏幕尺寸或将这个 http://thedtagency.com/images/hand.png and http://thedtagency.com/images/fist.png 在小屏幕尺寸中代替它。请在下面找到代码：

HTML:

.processes {
  height: 700px;
  width: 100%;
  /*background-color: powderblue;*/
}
.hand {
  height: 400px;
  position: absolute;
  bottom: 1%;
  left: 40%;
  opacity: 0;
  -webkit-animation: example1 40s infinite;
  /* Safari 4+ */
  -moz-animation: example1 40s infinite;
  /* Fx 5+ */
  -o-animation: example1 40s infinite;
  /* Opera 12+ */
  animation: example1 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_one {
  height: 200px;
  position: absolute;
  bottom: 20%;
  left: 22%;
  opacity: 0;
  -webkit-animation: example2 40s infinite;
  /* Safari 4+ */
  -moz-animation: example2 40s infinite;
  /* Fx 5+ */
  -o-animation: example2 40s infinite;
  /* Opera 12+ */
  animation: example2 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_two {
  height: 300px;
  position: absolute;
  bottom: 54%;
  left: 29%;
  opacity: 0;
  -webkit-animation: example3 40s infinite;
  /* Safari 4+ */
  -moz-animation: example3 40s infinite;
  /* Fx 5+ */
  -o-animation: example3 40s infinite;
  /* Opera 12+ */
  animation: example3 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_three {
  height: 300px;
  position: absolute;
  bottom: 59%;
  left: 44%;
  opacity: 0;
  -webkit-animation: example4 40s infinite;
  /* Safari 4+ */
  -moz-animation: example4 40s infinite;
  /* Fx 5+ */
  -o-animation: example4 40s infinite;
  /* Opera 12+ */
  animation: example4 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_four {
  height: 250px;
  position: absolute;
  bottom: 52%;
  left: 60%;
  opacity: 0;
  -webkit-animation: example5 40s infinite;
  /* Safari 4+ */
  -moz-animation: example5 40s infinite;
  /* Fx 5+ */
  -o-animation: example5 40s infinite;
  /* Opera 12+ */
  animation: example5 40s infinite;
  /* IE 10+, Fx 29+ */
}
.finger_five {
  height: 250px;
  position: absolute;
  bottom: 20%;
  left: 67%;
  opacity: 0;
  -webkit-animation: example6 40s infinite;
  /* Safari 4+ */
  -moz-animation: example6 40s infinite;
  /* Fx 5+ */
  -o-animation: example6 40s infinite;
  /* Opera 12+ */
  animation: example6 40s infinite;
  /* IE 10+, Fx 29+ */
}
.fist {
  height: 300px;
  position: absolute;
  bottom: 5%;
  left: 30%;
  opacity: 0;
  -webkit-animation: example7 40s infinite;
  /* Safari 4+ */
  -moz-animation: example7 40s infinite;
  /* Fx 5+ */
  -o-animation: example7 40s infinite;
  /* Opera 12+ */
  animation: example7 40s infinite;
  /* IE 10+, Fx 29+ */
}
.fist_bubble {
  height: 500px;
  position: absolute;
  bottom: 30%;
  left: 45%;
  opacity: 0;
  -webkit-animation: example8 40s infinite;
  /* Safari 4+ */
  -moz-animation: example8 40s infinite;
  /* Fx 5+ */
  -o-animation: example8 40s infinite;
  /* Opera 12+ */
  animation: example8 40s infinite;
  /* IE 10+, Fx 29+ */
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="processes">
  <img class="hand" src="" />
  <img class="finger_one" src="" />
  <img class="finger_two" src="" />
  <img class="finger_three" src="" />
  <img class="finger_four" src="" />
  <img class="finger_five" src="" />
  <img class="fist" src="" />
  <img class="fist_bubble" src="" />
</div>

Answer 1

您将需要使用 @media。

因此您的动画可以保持不变，因为它们只是基于不透明度。您将需要选择合理的断点，然后在其中覆盖元素的大小属性。

/* browser window up to 320px wide */
@media screen and (max-width: 320px) {
.processes {
    height: 50px;
}
/* browser window between 321px and 480px wide */
@media screen and (min-width: 321px) and (max-width: 480px) {
.processes {
    height: 100px;
}

等等等等。通常最好从最小的开始，然后朝着最大的方向努力。显然，不同的屏幕尺寸需要对其进行一些调整。

Answer 2

我已经使流程响应。我正在使用一个已知的填充技巧。

现在，布局中的所有内容都可以用百分比表示。你只是错过了身高...

此布局在任何分辨率下都可以正常工作。只是，如果你想节省带宽，你可以检查相关技术并使用不同的图像。但这是可选的。

.processes {
  height: 0px;
  padding-bottom: 50%;
  width: 80%;
  background-color: powderblue;
  position: relative;
}
.hand {
  height: 50%;
  position: absolute;
  bottom: 1%;
  left: 40%;
  opacity: 0;
  animation: example1 40s infinite;
}
.finger_one {
  height: 50%;
  position: absolute;
  bottom: 5%;
  left: 1%;
  opacity: 0;
  animation: example2 40s infinite;
}
.finger_two {
  height: 50%;
  position: absolute;
  bottom: 47%;
  left: 22%;
  opacity: 0;
  animation: example3 40s infinite;
}
.finger_three {
  height: 50%;
  position: absolute;
  bottom: 52%;
  left: 42%;
  opacity: 0;
  animation: example4 40s infinite;
}
.finger_four {
  height: 50%;
  position: absolute;
  bottom: 43%;
  left: 60%;
  opacity: 0;
  animation: example5 40s infinite;
}
.finger_five {
  height: 50%;
  position: absolute;
  bottom: 1%;
  left: 67%;
  opacity: 0;
  animation: example6 40s infinite;
}
.fist {
  height: 75%;
  position: absolute;
  bottom: 5%;
  left: 35%;
  opacity: 0;
  animation: example7 40s infinite;
}
.fist_bubble {
  height: 71%;
  position: absolute;
  bottom: 30%;
  left: 45%;
  opacity: 0;
  animation: example8 40s infinite;
}

@-webkit-keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example2 {
  5% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example3 {
  11% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example4 {
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example5 {
  33% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example6 {
  43% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example7 {
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Standard syntax */

@keyframes example8 {
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="processes">
  <img class="hand" src="http://thedtagency.com/images/process/hand.png" />
  <img class="finger_one" src="http://thedtagency.com/images/process/finger_1.png" />
  <img class="finger_two" src="http://thedtagency.com/images/process/finger_2.png" />
  <img class="finger_three" src="http://thedtagency.com/images/process/finger_3.png" />
  <img class="finger_four" src="http://thedtagency.com/images/process/finger_4.png" />
  <img class="finger_five" src="http://thedtagency.com/images/process/finger_5.png" />
  <img class="fist" src="http://thedtagency.com/images/process/fist.png" />
  <img class="fist_bubble" src="http://thedtagency.com/images/process/fist_1.png" />
</div>

CSS 动画屏幕响应

CSS animation screen responsiveness

html

css

responsive