CSSの:hoverでアニメーション設定した要素の中でリンク指定すると、スマホ表示ではどうなるのが正しい挙動？


**Q1.下記例でリンククリックした場合、正しい挙動は？**  
・アニメーションを最後まで動作させてからリンク遷移  
・アニメーション途中でリンク遷移  
・アニメーションせずにリンク遷移  
・アニメーション内容により異なる？

**html**

[code]

    <button class="hoge">
      <a href="/">リンク</a>
    </button>
    
[/code]

**css**

[code]

    .hoge:hover {
        animation: anim 0.5s forwards;
    }
    @-webkit-keyframes anim
    
[/code]

* * *

**Q2.aタグを外へ出したら意味は変わるでしょうか？**

[code]

    <a href="/">
      <button class="hoge">
        リンク
      </button>
    
[/code]

##

**Q3.スマホの実機だけ、リンク遷移しないのですが…**  
・PCやエミュレーでは動作するのですが、スマホの実機だけリンク遷移しません  
・アニメーションされるが、それだけです  
・どういった原因が考えられるでしょうか？




スマホではhoverにあたる挙動がないため、  
・アニメーションせずにリンク遷移  
になると思います。  
リンク遷移しないのとhoverは別の問題ではないかと思います。

というかbuttonタグとaタグを併用する必要はないのでは？

`<a href="/" class="hoge">リンク</a>`

ではいけませんか？

