再読み込みするたびに項目が動きます

前提・実現したいこと

はじめまして。検索してもわからなかったため利用させていただきます。
添付した動画を見ていただいたほうがわかりやすいのですが、再読み込みするたびに消しているリストや虫眼鏡がちらついてしまいます。
また、ホバーした時の動作をもっとゆっくりにしたいのですがアニメーションをつける動作がわかりません。

実現したいこととしましては、
・ページの再読み込みをする度にナビバーの項目が動かないようにしてほしい。
・フォームの虫眼鏡が動かないようにしてほしいが、クリックしたときに動画のようにゆっくり伸びるようにしてほしい。
ホバーした時に0.5秒遅らせて表示が出るようにしたい。

これらをすべてHTMLとCSSで作りたいのですが可能でしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>ind2</title>
7  <link rel="stylesheet" href="css/reset.css">
8  <link rel="stylesheet" href="css/custom.css">
9</head>
10<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
11<body>
12  <header>
13    <div class="container">
14      <div class="header__title">
15        <h1><a href="">Write</a></h1>
16        <p class="name">書くためのテーマ</p>
17      </div>
18      <nav class="header__nav">
19        <ul class="menu">
20          <li><a href="" class="after">ホーム</a>
21            <ul>
22              <li><a href="">→カスタマイズ</a></li>
23            </ul>
24          </li>
25          <li><a href="" class="after">ページ</span></a>
26            <ul>
27              <li><a href="">アイキャッチ画像なしのページ</a></li>
28              <li><a href="">ページ（全幅テンプレート）</a></li>
29            </ul>
30          </li>
31          <li><a href="">タイポグラフィー</a></li>
32          <li><a href="">お問い合わせ</a></li>
33        </ul>
34      </nav>
35      <div class="search-list">
36        <form action="">
37          <input class="search" name="" type="text" placeholder="検索&hellip;">
38        </form>
39      </div>
40    </div>
41  </header>
42  <img src="img/cropped-nicole-honeywill-730102-unsplash.jpg">
43</body>
44</html>
45
46

CSS
1*{box-sizing: border-box}
2
3body{
4  max-width:1040px;
5  margin: 0 auto;
6  font-family: Georgia, 'æ¸¸æ˜Žæœ', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
7  line-height: 1.8;
8}
9
10h1 a{
11  font-weight: 700;
12  font-size: 36px;
13  line-height: 1.3;
14}
15
16p{font-size: 18px;}
17
18.container{
19  height: 100px;
20  width: 1040px;
21  margin-top: 50px;
22  margin-bottom: 60px;
23  display: flex;
24  justify-content: space-between;
25}
26
27.header__title{
28  vertical-align: middle;
29  margin-top: 10px;
30}
31
32
33a{
34  color: #111111;
35  font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;;
36  text-decoration: none;
37  display: block;
38  line-height: 52px;
39  font-size: 17px;
40  text-align: left;
41  cursor: pointer;
42}
43
44a:hover{
45color: #c49029;
46}
47
48nav{
49  padding-top: 40px;
50  margin-left: 156px;
51}
52
53
54ul{
55  display: flex;
56  list-style: none;
57  padding: 0;
58  margin: 0;
59}
60
61ul.menu li{
62  padding-right:30px;
63  display: inline-block;
64  list-style-type: none;
65  position:relative;
66}
67
68.after::after{
69		display: inline-block;
70		font: normal 14px Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
71    -webkit-font-smoothing: antialiased;
72    font-family: "Font Awesome 5 Free"; 
73    font-weight: 900;
74    content: "\f107";
75		position: relative;
76    right: -8px;
77    bottom: 1px;
78}
79
80ul.menu ul{
81  display: none;
82  margin: 0;
83  padding: 0;
84  position:absolute;
85}
86
87ul.menu ul li{
88  padding: 10px 20px 0px 20px;
89  width: 188px;
90  background-color: #fff;
91  border: solid 1px gray;
92}
93
94ul.menu li:hover ul{
95  display: block;
96}
97
98.search:focus{
99  width:200px;
100  height: 34px;
101  border:1px solid #e0e0e0;
102  background-color: white;
103  cursor: text;
104}
105
106.search{
107  height: 34px;
108  width: 0;
109  background: url(../img/search.jpeg) no-repeat left center ;
110  background-size: 26px; 
111  padding-left: 36px;
112  font-size: 16px;
113  border:1px solid #e0e0e0;
114  z-index:5;
115  position: absolute;
116  right:0;
117  top: -5px;
118  outline: none;
119  border: none;
120  cursor: pointer;
121  transition: all 0.5s;
122}
123
124.search-list{
125  height: 40px;
126  display: inline;
127  float:right;
128  position:relative;
129}

試したこと

初心者なのでどれを試せばいいのかわかりませんでした。

補足情報（FW/ツールのバージョンなど）

Visual Studio Codeのバージョン: 1.52.1を使用しています。
Chromeで動作確認をしています。
[追記]サーバーには繋いでおらず、ローカルのみで動作確認をしていますが関係があるのでしょうか。

以上、よろしくお願いします。

m.ts10806

2021/02/27 23:35

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

hanakos

2021/02/28 00:07

修正方法まで丁寧にありがとうございます。上記の通りにやってみたのですが、CSSの部分だけがプレビューでは入っていたはずなのに質問画面ではそのままの状態になってしまいます。みづらいですが何卒よろしくお願いします。

m.ts10806

2021/02/28 00:10 編集

質問は編集できます。今はこうなってませんか？ ```html ``````css position:relative; }``` これを改行入れて離してみては。 ```html ``` ```css position:relative; } ```

hanakos

2021/02/28 00:15

まさにその通りでした。ありがとうございます。

meg_

2021/02/28 02:21

> ホバーした時に0.5秒遅らせて表示が出るようにしたい。上記については検索すればやり方が見つかるかと思いますが見つかりませんでしたか？

hanakos

2021/02/28 02:30

visibilityとopacityとtransitionを使ったやり方でしょうか？試してみたのですが、虫眼鏡ツールのように更新するたびちらつく現象が起きてしまいます。

meg_

2021/02/28 04:28

transitionで出来るかと思ったのですがダメでしたでしょうか？

hanakos

2021/02/28 04:30

そうですね。出来ませんでした。

meg_

2021/02/28 04:33

> そうですね。出来ませんでした。「試したこと」に試したコードとその結果を追記されると回答者が回答しやすくなるかと思います。

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

回答1件

自己解決

<head>のところに<script src="js/jquery-3.5.1.min.js"></script>を入力することによって、transitionなどで指定した指定した項目のちらつきをなくすことが出来ました。 fontawesomeを入れたところは模写したサイトを確認してみたところどうしても動いてしまうようです。お騒がせして大変申し訳ありませんでした。

投稿2021/02/28 05:42

hanakos

総合スコア0