CSS3动画工作在点击

Question

我正在尝试制作一个欢迎页面，一旦你点击它，它将被CSS转换。我不知道如何让页面下降，我只能让按钮在页面加载时下降。

我有:

<style>
pt-page-rotateFall {
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation: rotateFall 1s both ease-in;
     animation: rotateFall 1s both ease-in;} 
a {
    color:black;
      text-align:center;
      -moz-transition:all 1s ease; -webkit-transition:all 1s ease;        transition:all 1s ease;
    -o-transition:all 1s ease; -ms-transition:all 1s ease;
}
a:focus {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }

}

欢迎

Answer 1

您将需要Javascript来完成此操作。你可以在Javascript中完全处理动画本身，或者添加一个点击事件监听器，并在处理程序中为元素指定pt-pat - rotatefall类。