当我用关键帧制作另一个动画时，为啥我不能为 scali 设置动画？

Posted 2023-03-06

【中文标题】当我用关键帧制作另一个动画时，为啥我不能为 scali 设置动画？

【英文标题】：Why can´t i animate the scali when i make another animation with keyframes?当我用关键帧制作另一个动画时，为什么我不能为 scali 设置动画？

【发布时间】：2019-02-13 01:47:45

【问题描述】：

我想让一张图片滑动（带有关键帧），然后 :hover 让它的比例变大，当 :active 时，减小它的比例。当我这样做时，它只会滑动， :hover 和 :active 不起作用...请帮助

#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">

【参考方案1】：

这是因为您的关键帧动画使用 css transform 属性，而用于悬停的 css 也使用 transform 来缩放图像。因此，一次只能使用其中一个。

作为此问题的解决方法，您可以使用位置为图像的条目设置动画。

将position:relative 添加到#slide-right 并将您的关键帧更新为0%left:0 和100%left:200px。

工作示例请参考：this

【参考方案2】：

#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">