Question

我希望两个动画都能在悬停时执行，然后在光标移开后重置，就像下面的旋转动画一样。所以我只需要将增长动画与关键帧或？有什么建议？谢谢。

class Car (@BeanProperty val model:String, @BeanProperty val  make:String) {

}

#rotating_image {
                position:absolute;
                left:70px;
                top:100px;

                -webkit-transition: -webkit-transform .8s ease-in-out;
                -ms-transition: -ms-transform .8s ease-in-out;
                transition: transform .8s ease-in-out;
                
                }

#rotating_image:hover {
                      transform:rotate(360deg);
                      -ms-transform:rotate(360deg);
                      -webkit-transform:rotate(360deg);
                      }

Answer 1

尝试查看scale()，同时注意您可以使用多个transformations。

＆＃13;

#rotating_image {
  position: absolute;
  left: 70px;
  top: 100px;
  -webkit-transition: -webkit-transform .8s ease-in-out;
  -ms-transition: -ms-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}
#rotating_image:hover {
  transform: rotate(360deg) scale(2);
  -ms-transform: rotate(360deg) scale(2);
  -webkit-transform: rotate(360deg) scale(2);
}

＆＃13;

<img src="http://i.imgur.com/ZKEqcWm.jpg" id="rotating_image">

＆＃13;

Answer 2

所以这只有在知道开始和结束高度时才有效......但基本上高度过渡必须使用最大高度效果。以下示例假设您希望它从100px增长 - > 400像素。让我知道它是否需要动态高度

＆＃13;

#rotating_image {
                position:absolute;
                left:70px;
                top:100px;
                height: 400px;
                max-height: 100px;
                -webkit-transition: all .8s ease-in-out;
                -ms-transition: all .8s ease-in-out;
                transition: all .8s ease-in-out;
                
                }

#rotating_image:hover {
                      max-height: 400px;
                      transform:rotate(360deg);
                      -ms-transform:rotate(360deg);
                      -webkit-transform:rotate(360deg);
                      }

＆＃13;

<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">

＆＃13;

Answer 3

为此，您可以在transform中添加两个方法，如下所示：

#rotating_image {
                position:absolute;
                left:70px;
                top:100px;

                -webkit-transition: -webkit-transform .8s ease-in-out;
                -ms-transition: -ms-transform .8s ease-in-out;
                transition: transform .8s ease-in-out;
                
                }

#rotating_image:hover {
                      -ms-transform:rotate(360deg) scale(2,2);
                      -webkit-transform:rotate(360deg) scale(2,2);
                      transform:rotate(360deg) scale(2,2);
                      }

<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">

scale()中的2只是例子。您可以使用不同的数字。 scale()乘以参数中的数字：第一个是宽度，第二个是高度。此外，带有前缀的属性应始终位于没有它们的属性之前。解释上一句的示例：-webkit-transform和-ms-transform应该在transform之前。

如何将旋转和增长组合在一起使用固定轴悬停成一个CSS动画？

3 个答案: