HTML5遷移と変形のエフェクト。

Question

ボタンをクリックすると、HTML5とCSS3を使用して、以下に示すいくつかのことを行います。しかし、私はこれらのことをどうすれば達成できるのか分かりません。

私はボタンをクリックし

：0.5秒で scale(0.8)へ（ -webkit-transition:-webkit-transform 1s;を使用して）1秒

Change要素AのCSS3プロパティ-webkit-transformに

変更要素AのCSS3プロパティ-webkit-transformrotateY(180deg)にする（-webkit-transition:-webkit-transform 0.5s;を使用）。その後、要素AのCSS3プロパティ-webkit-transformをscale(1)に0.5秒で戻します（-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を。