如何使用CSS动画将div缩放到0.5，然后再缩放到1

Question

我正在尝试使用css动画实现go-out -in效果。

我想让项目快速返回，然后缓慢地返回到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

正如James所说，尝试动画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 和最新版本的浏览器，这些浏览器不再需要前缀标签。

这是一个你想要的关键帧的演示

下面是你想要的悬停伪选择器的演示。

还要注意支持。不过，如果你遵循最后两个版本规则(针对IE， 咳咳)，我不会太担心。

CSS3 Animation