-1
<style>
.abc .abc-animation {
position: relative;
margin: 0 auto;
width: 632px;
height: 460px;
overflow: hidden;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
background-image: url("http://zacharybrown.files.wordpress.com/2008/05/7-indians-chief.jpg");
}
.abc .ready .mouse {
-webkit-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-moz-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-ms-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-o-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-webkit-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
-moz-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
-o-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
-ms-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
}
.abc .mouse {
position: absolute;
left: -9px;
top: -9px;
z-index: 10;
display: inline-block;
opacity: 0;
width: 16px;
height: 16px;
background-color: #808080;
border-radius: 18px;
border: 2px solid #fff;
-webkit-transform: translate(150px, 105px);
-moz-transform: translate(150px, 105px);
-o-transform: translate(150px, 105px);
-ms-transform: translate(150px, 105px);
transform: translate(150px, 105px);
}
.abc .ready .mouse .click {
-webkit-animation: mouseclick 8s 0s 1 normal forwards;
-moz-animation: mouseclick 8s 0s 1 normal forwards;
-o-animation: mouseclick 8s 0s 1 normal forwards;
-ms-animation: mouseclick 8s 0s 1 normal forwards;
animation: mouseclick 8s 0s 1 normal forwards;
}
.abc .mouse .click {
display: inline-block;
opacity: 0;
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 5px;
top: 5px;
}
.abc .ready .screen {
opacity: 0;
}
.abc .screen.one {
z-index: 5;
background-image: url("http://3.bp.blogspot.com/-2kEUWmGpQlw/T4m3TJnnxdI/AAAAAAAABWs/LrY8LwQwWMg/s1600/DA0087.jpg");
-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-ms-transition-delay: 2s;
transition-delay: 2s;
}
.abc .screen {
width: 632px;
height: 460px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
position: absolute;
top: 0;
left: 0;
opacity: 1;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.abc .screen.two {
z-index: 4;
background-image: url("http://cloud3.faout.com/uploads/201208/heditor/201208171536178403.jpg");
-webkit-transition-delay: 5s;
-moz-transition-delay: 5s;
-o-transition-delay: 5s;
-ms-transition-delay: 5s;
transition-delay: 5s;
}
.abc .screen.three {
z-index: 3;
background-image: url("http://blog.seattletimes.nwsource.com/seattlesketcher/linesmith-m.jpg");
-webkit-transition-delay: 8s;
-moz-transition-delay: 8s;
-o-transition-delay: 8s;
-ms-transition-delay: 8s;
transition-delay: 8s;
}
</style>
<article class="abc">
<div class="container clear">
<div class="abc-block browser">
<div class="browser-bar">
<div class="browser-button"></div>
<div class="browser-button"></div>
<div class="browser-button"></div>
</div>
<div class="browser-content">
<div class="abc-animation ready">
<div class="mouse"><span class="click"></span></div>
<div class="screen one"></div>
<div class="screen two"></div>
<div class="screen three"></div>
<div class="screen four"></div>
</div>
</div>
</div>
</div>
</article>
위의 코드에서 나는 3 개의 다른 위치로 움직이는 하나의 원을 움직이기를 원하지만 작동하지 않습니다. 위의 코드에서 무엇이 잘못 되었습니까? 큰 코드를 알고 있지만 좋은 반응을 얻고 내 문제를 해결할 수 있기를 바랍니다.webkit-animation이 작동하지 않습니다.
공급 장치 A jsfiddle.net 예를 –
http://jsfiddle.net/amitshah02/RjSMy/2/ –