Question

当我点击一个按钮时，我想使用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;）。

有关于此问题的解决方案吗？

谢谢！

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

HTML5过渡和转换效果。

1 个答案: