0
私は1366 x 768の画面サイズで作成したので、どの画面サイズにも合わせるにはどうすればいいですか？http://thedtagency.com/images/hand.pngとhttp://thedtagency.com/images/fist.png小さな画面サイズでそれの代わりに。CSSアニメーションの画面応答性
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>
あなたは 'メディアquery'を使用しようか？ –