सीएसएस एकाधिक तत्वों पर एकाधिक एनिमेशन, कोई जावास्क्रिप्ट

मैं केवल सीएसएस और जावास्क्रिप्ट का उपयोग करके एक छवि स्लाइड शो बनाने की कोशिश कर रहा हूं।सीएसएस एकाधिक तत्वों पर एकाधिक एनिमेशन, कोई जावास्क्रिप्ट

मेरे पास यहां एक सबसे कामकाजी उदाहरण है: http://codepen.io/k/pen/Dkhei। समस्या यह है कि 'पिछली' कार्यक्षमता के लिए एनीमेशन तब नहीं रुक जाएगा जब मैं अपने तत्व पर होवर करना बंद कर दूंगा।

मैं एक ही तत्व पर दो एनिमेशन परिभाषित कर रहा हूं, जिसका वर्ग नाम 'imageContainer' है। मुझे यह जानकर उत्सुकता है कि मेरा वाक्यविन्यास गलत है या यदि मैं जो करने की कोशिश कर रहा हूं वह संभव नहीं है।

HTML:

<div class='carouselContainer'> 
<div class='directionSelector previous'>Previous</div> 
<div class='directionSelector next'>Next</div> 
<div class='imagesContainer'> 
    <img class='visible' src='http://ibmsmartercommerce.sourceforge.net/wp-content/uploads/2012/09/Roses_Bunch_Of_Flowers.jpeg'/> 
    <img class='hidden' src='http://houseoflowers.com/wp-content/uploads/2013/03/Splendid-flowers-wallpaper-wallpapers-1920x1200-mrwallpaper-com.jpg'/> 
    <img class='hidden test' src='http://wallzpoint.com/wp-content/gallery/flower-4/flower-flowers-31723005-1600-1200.jpg'/> 
    <img class='hidden' src='http://images2.layoutsparks.com/1/179204/no-idea-t5-flowers.jpg'/> 
    <img class='hidden' src='http://3.bp.blogspot.com/-Ca_H0XQYQI4/UQFMSauQxTI/AAAAAAAABik/WHzskd_HqqU/s1600/flowers.jpg'/> 
</div> 
</div>

सीएसएस:

.carouselContainer{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    border: 1px solid grey; 
    width: 450px; 
    height: 300px; 
    position: relative; 
    background-color: grey; 
    margin: auto; 
    overflow: hidden; 
} 

.directionSelector{ 
    width: 60px; 
    height: 1.5em; 
    line-height: 1.5em; 
    top: 150px !important; 
    position: absolute; 
    cursor: pointer; 
    background-color: rgba(1,1,1,.7); 
    color: white; 
    text-align: center; 
    border-radius: 5px; 
} 
.previous{ 
    top: 0; 
    left: 5px; 
} 
.next{ 
    top: 0; 
    right: 5px; 
} 
img{ 
    width: 100%; 
    height: 300px; 
    float: left; 
} 
.imagesContainer{ 
    width: 100%; 
    background-color: yellow; 
    -webkit-animation-name: showImagesPrev,showImagesNext; 
    -webkit-animation-duration: 5s,5s; 
    -webkit-animation-play-state: paused,paused; 
    -webkit-animation-fill-mode: forwards,forwards; 

    -moz-animation-name: showImagesPrev,showImagesNext; 
    -moz-animation-duration: 5s,5s; 
    -moz-animation-play-state: paused,paused; 
    -moz-animation-fill-mode: forwards,backwards; 

    animation-name: showImagesPrev,showImagesNext; 
    animation-duration: 5s,5s; 
    animation-play-state: paused,paused; 
    animation-fill-mode: forwards,backwards; 

} 
.previous:hover ~ div.imagesContainer{ 
    -webkit-animation-name: showImagesPrev; 
    -webkit-animation-play-state: running; 

    -moz-animation-name: showImagesPrev; 
    -moz-animation-play-state: running; 

    animation-name: showImagesPrev; 
    animation-play-state: running; 
} 
.next:hover ~ div.imagesContainer{ 
    -webkit-animation-name: showImagesNext; 
    -webkit-animation-play-state: running; 

    -moz-animation-name: showImagesNext; 
    -moz-animation-play-state: running; 

    animation-name: showImagesNext; 
    animation-play-state: running; 
} 
@-webkit-keyframes showImagesPrev{ 
    from{ 
    margin-top: 0px; 
    } 
    to{ 
    margin-top: -1200px; 
    } 
} 
@-moz-keyframes showImagesPrev{ 
    from{ 
    margin-top: 0px; 
    } 
    to{ 
    margin-top: -1200px; 
    } 
} 
@keyframes showImagesPrev{ 
    from{ 
    margin-top: 0px; 
    } 
    to{ 
    margin-top: -1200px; 
    } 
} 
@-webkit-keyframes showImagesNext{ 
    from{ 
    margin-top: -1200px; 
    } 
    to{ 
    margin-top: 0px; 
    } 
} 
@-moz-keyframes showImagesNext{ 
    from{ 
    margin-top: -1200px; 
    } 
    to{ 
    margin-top: 0px; 
    } 
} 
@keyframes showImagesNext{ 
    from{ 
    margin-top: -1200px; 
    } 
    to{ 
    margin-top: 0px; 
    } 
}

आपकी मदद :)

स्रोत

2013-04-04 karol

यह समस्या का कारण नहीं प्रतीत होता है, लेकिन 'एनीमेशन-फिल-मोड' के साथ एक टाइपो हो सकता है। उनमें से एक 'आगे, आगे' है और अन्य दो 'आगे, पीछे की तरफ' हैं। –

मुझे लगता है कि यह केवल तभी किया जा सकता है जब किसी भी बिंदु पर एक एकल एनीमेशन की दिशा को पीछे हटाना संभव हो। मैंने एक एकल एनीमेशन का उपयोग करने और 'सामान्य' और 'रिवर्स' (अगले और पिछले के लिए) के बीच 'एनीमेशन-दिशा' को टॉगलिंग करने का प्रयोग किया, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा था। –

@ मैट, वही विचार था और इसे भी काम करने की कोशिश की ... कोई भाग्य नहीं। लेकिन मुझे लगता है कि यह सही तरीका है। –

प्रति W3C के रूप में animation-name संपत्ति Link

यदि एक से अधिक एनिमेशन attempti हैं के लिए धन्यवाद एक ही संपत्ति को संशोधित करने के लिए, फिर नामों की सूची के अंत तक निकटतम एनीमेशन जीतता है।

अपने उदाहरण showImagesPrev में पहले कहा जाता है और showImagesNext पिछले एक था, इसलिए इसे सही ढंग से प्रति W3C के रूप में काम किया। यदि आप इन दो संदर्भों का आदान-प्रदान करते हैं, तो Previous ठीक काम करेगा, जबकि Next बटन समस्या को पुन: उत्पन्न करेगा। एक काम कर रहे Example

स्रोत

2013-05-15 08:50:56

एक ही समस्या ने मुझे 2 साल पहले प्रेतवाधित किया था। अब जवाब खोजने में खुशी हुई! – Luca

सीएसएस एकाधिक तत्वों पर एकाधिक एनिमेशन, कोई जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे