CSS3를 통해 슬라이드처럼 슬라이드

Question

이 구조가 있습니다.

HTML :

<div id="sequence"> 
      <img class="prev" src="themes/bc/imagesx/bt-prev.png" alt="Previous" /> 
      <img class="next" src="themes/bc/imagesx/bt-next.png" alt="Next" /> 
      <ul> 
       <li> 
        <div class="info animate-in"> 
         <h2>Built using Sequence.js</h2> 
         <p>The Responsive Slider with Advanced CSS3 Transitions</p> 
        </div> 
        <img class="sky animate-in" src="themes/bc/imagesx/bg-clouds.png" alt="Blue Sky" /> 
        <img class="balloon animate-in" src="themes/bc/imagesx/balloon.png" alt="Balloon" /> 
       </li> 
       <li> 
        <div class="info"> 
         <h2>Creative Control</h2> 
         <p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p> 
        </div> 
        <img class="sky" src="themes/bc/imagesx/bg-clouds2.png" alt="Blue Sky" /> 
        <img class="aeroplane" src="themes/bc/imagesx/aeroplane.png" alt="Aeroplane" /> 
       </li> 
       <li> 
        <div class="info"> 
         <h2>Cutting Edge</h2> 
         <p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p> 
        </div> 
        <img class="sky" src="themes/bc/imagesx/bg-clouds3.png" alt="Blue Sky" /> 
        <img class="kite" src="themes/bc/imagesx/kite.png" alt="Kite" /> 
       </li> 
      </ul> 
     </div> 

CSS :

.sky { 
    width: 100%; 
    right: -100%; 
    opacity: 1; 
    top: auto; 
    bottom:-25px; 
    vertical-align: middle; 

    -webkit-transition-property: left top; 
    -moz-transition-property: left top; 
    -o-transition-property: left top; 
    -ms-transition-property: left top; 
    transition-property: left top; 
    z-index: 1; 
} 

.sky.animate-in { 
    right: 0%; 
    opacity: 1; 
    top: auto; 
    bottom:-25px; 

    -webkit-transition-duration: 4s; 
    -moz-transition-duration: 4s; 
    -o-transition-duration: 4s; 
    -ms-transition-duration: 4s; 
    transition-duration: 4s; 

    -webkit-transition-property: left top; 
    -moz-transition-property: left top; 
    -o-transition-property: left top; 
    -ms-transition-property: left top; 
    transition-property: left top; 
    z-index: 1; 
    ransition-timing-function: ease; 
-moz-transition-timing-function: ease; /* Firefox 4 */ 
-webkit-transition-timing-function: ease; /* Safari and Chrome */ 
-o-transition-timing-function: ease; /* Opera */ 

} 

.sky.animate-out { 
    right: 100%; 
    opacity: 1; 
    top: auto; 
    bottom:-25px; 

    -webkit-transition-duration: 4s; 
    -moz-transition-duration: 4s; 
    -o-transition-duration: 4s; 
    -ms-transition-duration: 4s; 
    transition-duration: 4s; 

    -webkit-transition-property: left top; 
    -moz-transition-property: left top; 
    -o-transition-property: left top; 
    -ms-transition-property: left top; 
    transition-property: left top; 
    z-index: 1; 
    transition-timing-function: ease; 
-moz-transition-timing-function: ease; /* Firefox 4 */ 
-webkit-transition-timing-function: ease; /* Safari and Chrome */ 
-o-transition-timing-function: ease; /* Opera */ 
} 

내가 Sequence JS 플러그인을 사용하고 있습니다. 모든 것이 작동합니다. 그러나 나는 bgclouds와 bgclouds2가 전환시에 분리되어서는 안된다. 같은 시간에 시작하고 같은 시간에 끝납니다. 하지만 지금은 부드럽습니다.

CSS3를 통해 구조를 만들 수 있습니까? http://css3.bradshawenterprises.com/sliding/ 이미지 2를 클릭하면 image1로 이동하여 직접 image2를 시작하십시오.

죄송합니다. 도와주세요.

Answer 1

CSS에서 @keyframes를 조사하고 싶을 수도 있습니다. 이것들은 당신이 당신의 애니메이션 내에서 아이템을 시작하고 멈출 시간을 정할 수있게합니다.