Question

我尝试使用css动画实现外出效果。

我希望该项目能够快速返回，然后缩短为1。

这样的事情：

div {

    height: 200px;
    width: 200px;
    background-color: green;
  border: 1px grey solid;
  position: absolute;

    -webkit-transition-property: -webkit-transform, -webkit-transform;
    -webkit-transition-duration: 0.1s, 0.5s;
    -webkit-transition-timing-function: ease-out, ease-in;
    -webkit-transition-delay: 0, 0;
}

div:hover {
  -webkit-transform: scale(0.5);
-webkit-transform: scale(1); 

}

有什么想法吗？

Answer 1

正如詹姆斯所说，试试动画CSS3。

要获得您想要的内容，请尝试使用他的代码并进行更改：

@-webkit-keyframes scale {
    5% {
        -webkit-transform: scale(0.5);
    }
    50% {
        -webkit-transform: scale(1);
    }
}

并添加：

div:hover{
    -webkit-animation: scale 5s ease-out;
}

此处示例：http://jsfiddle.net/7Cf8C/

Answer 2

如果您希望它为关键帧设置动画，那么您的CSS需要是：

div {
    height: 200px;
    width: 200px;
    background-color: green;
    border: 1px grey solid;
    position: absolute;
}

div:hover {
  -webkit-animation: scale 0.5s ease-in-out 0s;
     -moz-animation: scale 0.5s ease-in-out 0s;
       -o-animation: scale 0.5s ease-in-out 0s;
          animation: scale 0.5s ease-in-out 0s;
}

@keyframes scale {
    0% {}
    50% {transform: scale(0.5)}
}

@-webkit-keyframes scale {
    0% {}
    50% {-webkit-transform: scale(0.5)}
}

@-moz-keyframes scale {
    0% {}
    50% {-moz-transform: scale(0.5)}
}

@-ms-keyframes scale {
    0% {}
    50% {-ms-transform: scale(0.5)}
}

@-o-keyframes scale {
    0% {}
    50% {-o-transform: scale(0.5)}
}

但是，您也可以使用transition属性，但不如关键帧灵活。

div {
    height: 200px;
    width: 200px;
    background-color: green;
    border: 1px grey solid;
    position: absolute;
-webkit-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
}

div:hover {
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
}

你真的应该在网上查找讨论CSS3动画的文章。其中有成千上万的细节。

不要忘记您需要使用前缀来支持所有浏览器。

这些是：

-webkit-，-moz-和-o-。有时您可能需要-ms-用于IE。你必须编写没有前缀的动画。这是为了支持IE 和大多数不再需要带前缀标记的浏览器的最新版本。

Here's a DEMO of what you want with Keyframes.

<强> Here's a DEMO of what you want with the hover pseudo selector.

也要注意支持。但是，如果你遵循最后两个版本规则（针对IE，咳嗽咳嗽），我不会过分担心它。

CanIUse CSS3 Animation

如何使用css动画将div缩放到0.5而不是1？

2 个答案: