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);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。