SteveW SteveW - 1 month ago 21
CSS Question

CSS animation screen responsiveness

I'm trying to make this CSS animation responsive within different screen sizes, I have created for 1366 x 768 screen size, how do I get it to fit within all screen sizes or place this one http://thedtagency.com/images/hand.png and http://thedtagency.com/images/fist.png in place of it in small screen sizes. Please find the code below:

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="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

I have made processes responsive. I am using a known trick with padding.

Now, everything in you layout can be expressed as pencentages. You were only missing the height...

This layout is working ok at any resolution. Just, if you want to save bandwith, you can check techniques about that and use different images. But this is 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>

Comments