HTML5 过渡和变换效果。

Question

当我点击一个按钮时，我想使用 HTML5 和 CSS3 做下面列出的一些事情。但我不知道如何同时实现这些目标。

当我点击一个按钮时:

在 1 秒内将元素 A 的 CSS3 属性 -webkit-transform 更改为 rotateY(180deg) (using -webkit-transition:-webkit-transform 1s; )

在 0.5 秒内将元素 A 的 CSS3 属性 -webkit-transform 更改为 scale(0.8)(使用 -webkit-transition:-webkit-transform 0.5s ;)。然后在 0.5 秒内将元素 A 的 CSS3 属性 -webkit-transform 改回 scale(1) (using -webkit-transition:-webkit-transform 0.5s; )。

这个问题有什么解决方案吗？

谢谢!

Answer 1

你必须使用 animation而不是过渡:

@-webkit-keyframes myAnimation{
    from {
        -webkit-transform: rotate(0deg) scale(1);
    }
    50% {
        -webkit-transform: rotate(90deg) scale(0.8);
    }
    to {
        -webkit-transform: rotate(180deg) scale(1);
    }
}


div {
    -webkit-animation-duration: 1s;
}
div:hover {
    -webkit-animation-name: myAnimation;
    -webkit-transform: rotate(180deg) scale(1);
}

Here's a demo .