hover-outに逆戻り処理

hoverでanimationを設定する際に下記のように、hover-outの時もanimationする
ように設定したいと考えております。そこで逆戻りのような処理をする場合、元の要素にも逆の動きをするような
animationを設定すれば良いと言う趣旨の記事を見つけることができました。

すると、確かに.menu_liからhover-outするときに、animationが聞いているのですが、
ページの読み込み時点においても、元の要素にcssを設定してしまっていることから、動作が生じてしまいます。
下記のコード同様のもののJSFiddle

どのようにすればページの読み込み時はanimationが実行されず、hover-outの時のみ意図するanimationを実施させることができるのでしょうか？
よろしくお願い申し上げます。

html
1<ul>
2  <li class="menu_li"><div class="circle"></div><a href="#">一覧</a></li>
3</ul>

css
1.circle{
2  border-radius: 50%;
3  background:#c7c7c778;
4  width:50px;
5  height:50px;
6  position:absolute;
7  top: 3px;
8  left: 173px;
9  opacity: 0;
10  z-index: -1;
11  animation-name: small;
12  animation-duration: 1s;
13  animation-fill-mode: forwards;
14}
15
16.menu_li:hover .circle{
17  animation-name: big;
18  animation-duration: 1s;
19  animation-fill-mode: forwards;
20}
21
22@keyframes big{
230%{
24transform: scale(0);
25opacity:0;
26}
271%{
28opacity:1;
29}
30100%{
31transform: scale(1);
32opacity:1;
33}
34}
35
36@keyframes small{
370%{
38transform: scale(1);
39opacity:1;
40}
4199%{
42opacity:1;
43}
44100%{
45transform: scale(0);
46opacity:0;
47}
48}
49

行動規範の内容に同意します

回答2件

ベストアンサー

`transition` プロパティを使う

transition プロパティを用いて @keyframes 内で行なっているアニメーションを置き換えることが出来る場合は、 transition プロパティを使用すると良いと思います(動作確認用リンク)。

HTML
1<ul>
2  <li class="menu_li">
3    <div class="circle"></div><a href="#">一覧</a>
4  </li>
5</ul>

CSS
1.circle {
2  border-radius: 50%;
3  background: #c7c7c778;
4  width: 50px;
5  height: 50px;
6  position: absolute;
7  top: 3px;
8  left: 173px;
9  z-index: -1;
10  transition: opacity 1s, transform 1s;
11  opacity: 0;
12  transform: scale(0);
13}
14
15.menu_li:hover .circle {
16  transform: scale(1);
17  opacity: 1;
18}

アニメーションの実行をしない

初回のアニメーションが実行されるときのみ JavaScript でアニメーションの時間を 0s に設定することで、アニメーションの実行を抑制出来ます。その後、アニメーションの時間を元に戻すことで、質問者さんの実現したいことが行なえます(動作確認用リンク)。

HTML
1<ul>
2  <li class="menu_li">
3    <div class="circle"></div><a href="#">一覧</a>
4  </li>
5</ul>

CSS
1.circle {
2  border-radius: 50%;
3  background: #c7c7c778;
4  width: 50px;
5  height: 50px;
6  position: absolute;
7  top: 3px;
8  left: 173px;
9  opacity: 0;
10  z-index: -1;
11  animation-name: small;
12  animation-fill-mode: forwards;
13}
14
15.menu_li:hover .circle {
16  animation-name: big;
17  animation-duration: 1s;
18  animation-fill-mode: forwards;
19}
20
21@keyframes big {
22  0% {
23    transform: scale(0);
24    opacity: 0;
25  }
26  1% {
27    opacity: 1;
28  }
29  100% {
30    transform: scale(1);
31    opacity: 1;
32  }
33}
34
35@keyframes small {
36  0% {
37    transform: scale(1);
38    opacity: 1;
39  }
40  99% {
41    opacity: 1;
42  }
43  100% {
44    transform: scale(0);
45    opacity: 0;
46  }
47}
48

JavaScript
1setTimeout(function() {
2  document.querySelector(".circle").style.animationDuration = "1s";
3}, 1000);

要素を非表示にしておく

初回のアニメーションが実行されるときのみ JavaScript でアニメーションが適用されている要素を隠しておくことで、質問者さんの実現したいことが行なえます(動作確認用リンク)。

HTML
1<ul>
2  <li class="menu_li">
3    <div class="circle"></div><a href="#">一覧</a>
4  </li>
5</ul>

CSS
1.circle {
2  border-radius: 50%;
3  background: #c7c7c778;
4  width: 50px;
5  height: 50px;
6  position: absolute;
7  top: 3px;
8  left: 173px;
9  opacity: 0;
10  z-index: -1;
11  animation-name: small;
12  animation-duration: 1s;
13  animation-fill-mode: forwards;
14  visibility: hidden;
15}
16
17.menu_li:hover .circle {
18  animation-name: big;
19  animation-duration: 1s;
20  animation-fill-mode: forwards;
21}
22
23@keyframes big {
24  0% {
25    transform: scale(0);
26    opacity: 0;
27  }
28  1% {
29    opacity: 1;
30  }
31  100% {
32    transform: scale(1);
33    opacity: 1;
34  }
35}
36
37@keyframes small {
38  0% {
39    transform: scale(1);
40    opacity: 1;
41  }
42  99% {
43    opacity: 1;
44  }
45  100% {
46    transform: scale(0);
47    opacity: 0;
48  }
49}

JavaScript
1setTimeout(function() {
2  document.querySelector(".circle").style.visibility = "visible";
3}, 1000);

投稿2019/05/10 15:05

s8_chu

総合スコア14731

申し訳ございません、記事にもページロード時の症状はどうしようもないと書いてありました。。

投稿2019/05/10 14:59

SugiuraY

総合スコア317

s8_chu

2019/05/10 15:07

JavaScript を使用してよい前提ならば、どうしようもなくないと思います。また、今回の場合、 `transition` プロパティで代替可能な範囲のアニメーションではないでしょうか。

SugiuraY

2019/05/10 15:23

詳細ご回答を賜り、本当にありがとうございます。私の勝手な誤解で、transitionとtransformは併用できないと思っていたので、scale操作ができずに、どうしても中心から円を広げることができずに(width heightをtransitionすると左上から円が広がってしまう)transitionを諦めていました。このようなcssの使い方ができるのですね！また、transitionについて、カンマ区切りで複数のプロパティを指定することができることを初めて知りました、自分が勉強不足すぎて、泣きそうに悔しいですが、頑張ります！またJSでのテクニックについても大変勉強になりました、なんとでも考えればやりようが見つかる場合が多いのですね、、改めて御礼を申し上げます、ありがとうございます！

行動規範の内容に同意します

あなたの回答