当我用关键帧制作另一个动画时，为什么我无法为scali制作动画？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当我用关键帧制作另一个动画时，为什么我无法为scali制作动画？相关的知识，希望对你有一定的参考价值。
我希望图片能够滑动（带有关键帧），并且wen：悬停它的比例增长，当：活动时，减小它的比例。当我这样做时，它只会滑动，：悬停和：活动不起作用...请帮助
#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">答案
这是因为您的关键帧动画使用css transform属性和css for hover也使用transform来缩放图像。因此，其中只有一个可以同时工作。
作为此问题的解决方法，您可以使用位置为图像输入设置动画。
将position:relative添加到#slide-right并将你的关键帧更新为0%{left:0}和100%{left:200px}。
有关工作示例，请参阅：this
另一答案
#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">以上是关于当我用关键帧制作另一个动画时，为什么我无法为scali制作动画？的主要内容，如果未能解决你的问题，请参考以下文章