hoverのエッフェクトとcssアニメーションの同居はできないのでしょうか？

Question

hoverのエッフェクトとcssアニメーションの同居はできないのでしょうか？

アニメーションを付けたところhoverが効かなくなりました。

両方効かすことはできないのでしょうか？

box-shadowのアニメーしょんとホバー効果をつけています。
まったく同じ動きですが、片方がアニメーションの繰り返しで片方がhover時のeffectですが、box-shadowのソースは変わりません。

Answer 1

もしかしたら、題意を汲めていないかもしれませんが、解決できそうなコードを提示させていただきます。

<a href="#" class="link-shadow">Link</a>

.link-shadow {
    text-shadow: 1px 1px 5px #000;
    transition: text-shadow .2s ease;
}

.link-shadow:hover {
    text-shadow: 1px 1px 1px #000;
}

仰るアニメーションがどのようなものかわかりませんが、単純にhoverしたらtext-shadowの値を変えるというのであれば、これで実装できます。

Comments

[退会済みユーザー]

ありがとうございます。

下記に再現してみましたがhoverじにシャドウはついていますか？
http://codepen.io/anon/pen/dOXjdR

[simochee]

失礼しました、box-shadowをアニメーションさせたかったのですね。

.link-shadow {
box-shadow: 1px 1px 5px #000;
transition: box-shadow .2s ease;
}

.link-shadow:hover {
box-shadow: 1px 1px 1px #000;
}
これで実装できます。

また、animationで実装する場合は
@keyframes anime {
0% {
box-shadow: 0 0 1px #aaa;
}
50% {
box-shadow: 0 0 10px #000;
}
100% {
box-shadow: 0 0 1px #aaa;
}
}

.link-shadow:hover {
animation: anime .8s ease infinite;
}
このようにすればフラッシュのようなアニメーションが実装できます。

[退会済みユーザー]

ありがとうございます。

ホバーのほうは確実に動いています。アニメーション微妙でわからないのですが、動いていますか？
http://codepen.io/anon/pen/dOXjdR

いずれにしろ、ボックスシャドウのホバーとアニメーションはおなじ要素に、
指定しても効かなくなるということはないのですね。