मैं एक तस्वीर को स्लाइड करना चाहता हूं (कीफ्रेम के साथ), और वेन: होवर करें कि इसका पैमाना बढ़ता है, और जब: सक्रिय, इसके पैमाने को कम करें। जब मैं ऐसा करता हूं, तो यह केवल स्लाइड करता है: होवर और: सक्रिय काम नहीं करते... कृपया मदद करें

#slide-right {
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 25px;
  height: 250px;
  box-shadow: 0px 1px 5px grey;
  border-radius: 10px;
  transition: .5s;
	animation: slide-right 1s ease-out both;
}

#slide-right:hover {
  transition: .5s;
  transform: scale(1.04);
}

#slide-right:active {
  transition: .2s;
  transform: scale(0.95);
}

@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(+200px);
  }
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">
0
Mario Zurdo 7 सितंबर 2018, 20:20

2 जवाब

सबसे बढ़िया उत्तर

ऐसा इसलिए हो रहा है क्योंकि आपका की-फ्रेम एनीमेशन css transform प्रॉपर्टी का उपयोग कर रहा है और होवर के लिए css भी इमेज को स्केल करने के लिए transform का उपयोग करता है। तो, इसमें से केवल एक ही समय में काम करेगा।

इस समस्या के समाधान के रूप में, आप स्थिति का उपयोग करके छवि की प्रविष्टि को चेतन कर सकते हैं।

position:relative को #slide-right में जोड़ें और अपने की-फ़्रेम को 0%{left:0} और 100%{left:200px} में अपडेट करें।

काम करने के उदाहरण के लिए, कृपया देखें: यह

0
Shubham Yerawar 8 सितंबर 2018, 08:50
#slide-right {
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 25px;
  height: 250px;
  box-shadow: 0px 1px 5px grey;
  border-radius: 10px;
  transition: .5s;
	animation: slide-right 1s ease-out forwards;
}


@keyframes slide-right{
  0% {
    left: 0px;
  }
  100% {
    left: 200px;
  }
}

#slide-right:hover {
  transition: .5s;
  transform: scale(1.04);
}

#slide-right:active {
  transition: .2s;
  transform: scale(0.95);
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">
1
Marco Messina 7 सितंबर 2018, 21:46