CSSのホバーで下線が出てくるアニメーションをしたら文字化け(シャギー?)し文字が勝手に上下に少し動いてしまいます。
何か解決策はないでしょうか?
使用OS:Windows11
使用ブラウザ:Google Chrome
文字化けの動画URLです。(動画の赤丸は文字化け箇所が見やすい様に動画編集で付けました)
https://youtu.be/CGjJrHE7uKg
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <meta name="description" content=""> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <nav> <ul> <li><a href="">トップ</a></li> <li><a href="">お問い合わせ</a></li> <li><a href="">ニュース</a></li> </ul> </nav> </body> </html>
CSS
body { font-family: 'MS Mincho', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif; font-size: 16px; font-weight: bold; } nav { width: 900px; margin: 0 auto; margin-top: 150px; } nav ul { display: flex; list-style: none; margin-bottom: 50px; justify-content: space-around; } nav ul li { text-align: center; } nav ul li a { position: relative; display: inline-block; transform: rotate(0.03deg); } nav ul li a::after { position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 2px; background: #333; transform: scale(0, 1); transform-origin: center top; transition: transform .3s; } nav ul li a:hover::after { transform: scale(1, 1); }
リセットCSS
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */ /* Reset box-model and set borders */ /* ============================================ */ *, ::before, ::after { box-sizing: border-box; border-style: solid; border-width: 0; } /* Document */ /* ============================================ */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. * 3. Remove gray overlay on links for iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-tap-highlight-color: transparent; /* 3*/ } /* Sections */ /* ============================================ */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /* Vertical rhythm */ /* ============================================ */ p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; } /* Headings */ /* ============================================ */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; } /* Lists (enumeration) */ /* ============================================ */ ul, ol { margin: 0; padding: 0; list-style: none; } /* Lists (definition) */ /* ============================================ */ dt { font-weight: bold; } dd { margin-left: 0; } /* Grouping content */ /* ============================================ */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ border-top-width: 1px; margin: 0; clear: both; color: inherit; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } address { font-style: inherit; } /* Text-level semantics */ /* ============================================ */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; text-decoration: none; color: inherit; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Replaced content */ /* ============================================ */ /** * Prevent vertical alignment issues. */ svg, img, embed, object, iframe { vertical-align: bottom; } /* Forms */ /* ============================================ */ /** * Reset form fields to make them styleable. * 1. Make form elements stylable across systems iOS especially. * 2. Inherit text-transform from parent. */ button, input, optgroup, select, textarea { -webkit-appearance: none; /* 1 */ appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit; /* 2 */ } /** * Reset radio and checkbox appearance to preserve their look in iOS. */ [type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; } [type="radio"] { -webkit-appearance: radio; appearance: radio; } /** * Correct cursors for clickable elements. */ button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; } button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default; } /** * Improve outlines for Firefox and unify style with input elements & buttons. */ :-moz-focusring { outline: auto; } select:disabled { opacity: inherit; } /** * Remove padding */ option { padding: 0; } /** * Reset to invisible */ fieldset { margin: 0; padding: 0; min-width: 0; } legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the outline style in Safari. */ [type="search"] { outline-offset: -2px; /* 1 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Fix font inheritance. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Clickable labels */ label[for] { cursor: pointer; } /* Interactive */ /* ============================================ */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* * Remove outline for editable content. */ [contenteditable]:focus { outline: auto; } /* Tables */ /* ============================================ */ /** 1. Correct table border color inheritance in all Chrome and Safari. */ table { border-color: inherit; /* 1 */ border-collapse: collapse; } caption { text-align: left; } td, th { vertical-align: top; padding: 0; } th { text-align: left; font-weight: bold; }
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/10/04 20:42
2022/10/04 20:55 編集
2022/10/06 16:41
2022/10/06 16:54
2022/10/06 17:03