HTML5 过渡和变换效果。答案

【问题标题】：HTML5 Transition and Transform effect.HTML5 过渡和变换效果。
【发布时间】：2011-07-29 08:58:19
【问题描述】：

当我单击一个按钮时，我想使用 HTML5 和 CSS3 执行下面列出的一些操作。但我不知道如何同时实现这些目标。

当我点击一个按钮时：

在 1 秒内将元素 A 的 CSS3 属性 -webkit-transform 更改为 rotateY(180deg)（使用 -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)（使用 -webkit-transition:-webkit-transform 0.5s;）。

这个问题有解决办法吗？

谢谢！

【问题讨论】：

标签： html css transform transition

【解决方案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.

【讨论】：