CSS-Animation Bildschirm Reaktionsfähigkeit

Question

Ich versuche, diese CSS-Animation reagieren innerhalb verschiedener Bildschirmgrößen, die ich für 1366 x 768 Bildschirmgröße erstellt habe, wie bekomme ich es in alle Bildschirmgrößen passen oder setzen Sie diese http://thedtagency.com/images/hand.png und anstelle davon in kleinen Bildschirmgrößen. Bitte finden Sie den Code unten:

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

Ich habe Prozesse reagiert. Ich verwende einen bekannten Trick mit Padding.

Jetzt kann alles in Ihrem Layout in Prozent ausgedrückt werden. Du hast nur die Höhe vermisst ...

Dieses Layout funktioniert bei jeder Auflösung ok. Nur wenn Sie Bandbreite speichern möchten, können Sie Techniken überprüfen und verschiedene Bilder verwenden. Aber das ist optional.

.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>

Answer 2

Sie müssen @media verwenden.

So können Ihre Animationen die gleichen bleiben wie sie nur auf Opazität basieren. Sie müssen angemessene Breakpoints auswählen und dann die Größenattribute Ihrer Elemente darin überschreiben.

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

und so weiter und so weiter. Normalerweise ist es am besten, mit dem kleinsten anzufangen und einfach auf den Größten hinzuarbeiten. Offensichtlich müssen verschiedene Bildschirmgrößen mit ihnen etwas optimiert werden.