グローバルナビをクリック時、文字が動く

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTMLとCSSを使用したポートフォリオサイトを制作しております。
最上部にnavタグで囲ったメニューボタンを作ったのですが、クリックしてページに移動した時に、
本来配置してある場所より上から出てくるような動きになってしまいます。
（上からビヨーンと定位置に戻るイメージです。）

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<<HTML>>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愛知県 | 見立てイラストレーター 若宮ツナ</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- header -->
    <header class="header">
        <div class="header-inner">
            <nav class="header-nav">
                <ul class="nav-list">
                    <li class="nav-item"><a href="index.html">トップ</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="profile.html">わたしについて</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="illust.html">オリジナルイラスト</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="work.html">制作実績</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="flow.html">制作の流れ</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="#contact">お問い合わせ</a></li>
                </ul>    
            </nav>
        </div>
    </header>
    <!-- //header -->

    


<<css>>
/*---------------------------------------------*/
/*base*/
/*---------------------------------------------*/

*{
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-size: 1.2rem;
    letter-spacing: .1em;
    color: #636363;
}

img{
    width: 100%;
    vertical-align: bottom;
}

li{
    list-style: none;
}

.section-wrapper{
    padding: 100px 0 70px;
}

.section-inner{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

a{
    text-decoration: none;
    color: #636363;
}

/*---------------------------------------------*/
/*base*/
/*---------------------------------------------*/


/*---------------------------------------------*/
/*header*/
/*---------------------------------------------*/

.header{
    padding: 60px 0;  
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    transition: 0.5s;  
}

.header-inner{
    margin: 0 auto;
    max-width: 1200px;
}

.header-nav{
    width: 100%;
}

.header a{
    color: #636363;
    transition: 0.5s;
}

.header a:hover{
    color: #f4617c;
}

.nav-list{
    text-align: center;
    display: flex;
    justify-content: center;
}

.nav-item{
    margin-right: 30px;
    display: inline-block;
}

.nav-item a{
    font-size: 1.2rem;
}

.nav-item:last-child{
    margin-right: 0;
}

/*---------------------------------------------*/
/*header*/
/*---------------------------------------------*/

試したこと

グーグルフォントを使っていたので、その読みこみ時に起こるFlash Of Unstyled Text (FOUT)
という現象が原因かと思いグーグルフォントを消したのですが、現象は変わりませんでした。

reset.cssをリンクしたのが原因かと思いコメントアウトしてみたのですが変化なしでした。

どうぞご回答宜しくお願い致します。

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

ここにより詳細な情報を記載してください。

omori3

2020/05/11 14:05

動きが再現できなかったんですが、移動後のページのhtml/cssも添付いただければ確認します。

58design

2020/05/11 14:18

大変申し訳ございません。移動後のページのhtml、cssを全てまとめた圧縮ファイルです。経験が浅くご迷惑おかけして申し訳ございませんが、圧縮解凍していただきご確認して頂けると幸いです。 https://18.gigafile.nu/0518-b1711d55e657e33ca6b2d055e7960956f

omori3

2020/05/11 14:29

ダウンロードしました！ありがとうございます。

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

回答1件

ベストアンサー

（問題）
reset.css headerに対してpadding:0
style.css .headerに対してpadding:60 0

cssが解釈されていく中で、paddingの上書きがあります。
これはいいのですが、この変更に対して、

style.css .headerに対してtransition: 0.5s
があるので、0.5秒かけて変更になるのでニュッと動く感じになります。

（解決）
style.css .headerのtransition: 0.5sを消せば動きがなくなります。
（paddingの上書きが、0.5秒で動いていたものがコンピュータの速度で解釈されるので、）

それともtranstionは何かのアニメーションで必要なものでしょうか？

投稿2020/05/11 14:30

omori3

総合スコア274

58design

2020/05/11 14:58

ダウンロード頂きありがとうございました。 .headerのtransitionを削除したら文字の動きが直りました。メニューをホバー時にフワッと色を変化させたかったのでtransitionをつけておりました。本当にありがとうございました。

omori3

2020/05/11 15:02

なるほど。コメントアウトしてあるようでしたが、 .header aへのtransitionを復活させれば色の変化いい感じになります。関係ないですが、とても素敵なイラストですね！また困ったことがあったら聞いてください。

58design

2020/05/11 15:11

親切なご対応ありがとうございました。現在コーディングの勉強をしておりまして、アウトプットのため友人にお願いしてポートフォリオサイトを作らせてもらっていた所だったんです。友人に伝えておきます。自分で解決出来なくなりましたら、また宜しくお願い致します。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！