Ayuda en la programación, respuestas a preguntas / Html / Capacidad de respuesta de la pantalla de animación CSS: html, css, html5, css3, responsive

Capacidad de respuesta de la pantalla de animación CSS: html, css, html5, css3, responsive

Estoy tratando de hacer que esta animación CSS responda en diferentes tamaños de pantalla, he creado para un tamaño de pantalla de 1366 x 768, ¿cómo hago para que se ajuste a todos los tamaños de pantalla o coloque esta? http://thedtagency.com/images/hand.png y http://thedtagency.com/images/fist.png en su lugar en pantallas pequeñas. Por favor encuentre el código a continuación:

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="/images/" />
<img class="finger_one" src="/images/" />
<img class="finger_two" src="/images/" />
<img class="finger_three" src="/images/" />
<img class="finger_four" src="/images/" />
<img class="finger_five" src="/images/" />
<img class="fist" src="/images/" />
<img class="fist_bubble" src="/images/" />
</div>

Respuestas

1 para la respuesta № 1

He hecho que los procesos respondan. Estoy usando un truco conocido con relleno.

Ahora, todo en su diseño puede expresarse como porcentajes. Solo te faltaba la altura ...

Este diseño funciona bien en cualquier resolución. Simplemente, si desea ahorrar ancho de banda, puede verificar las técnicas al respecto y usar diferentes imágenes. Pero esto es opcional.

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

0 para la respuesta № 2

Necesitarás usar @media.

Por lo tanto, sus animaciones pueden permanecer igual ya que solo están basadas en la opacidad. Deberá elegir puntos de interrupción razonables y luego simplemente anular los atributos de tamaño de sus elementos allí.

/* 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;
}

y así sucesivamente. Por lo general, es mejor comenzar con el más pequeño y simplemente trabajar hacia el más grande. Obviamente, los diferentes tamaños de pantalla necesitarán algunos ajustes con ellos.