ホバー時のアニメーションがページを開いたときにも適用されてしまう

前提・実現したいこと

CSSで使ってホバー時にテキストを拡大する簡単なアニメーションを作りたいです。

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

transitionを使って実装しようとしています。

ホバー時のみならず、ページを開いた(リロードした)時にもテキストが16pxから50pxになるまでのアニメーションが発生してしまいます。
最初から50pxにしておきたいのですが...

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="test.css">
8    <title>Document</title>
9</head>
10<body>
11    <a href="#">テキスト</a>
12</body>
13</html>

CSS
1a {
2	display: inline-block;
3	transition-duration: 0.5s;
4	text-decoration: none;
5    font-size: 50px;
6}
7a:hover {
8	transform: scale(1.2);
9}

試したこと

「font-size: 50px;」の部分にもtransitionが適用されているのでしょうが、ここを適用外にする方法を調べようとしましたが分かりませんでした。transition-propertyとか関係あるのかなと思いましたがそれもよくわからず...

かなり基本的なことなのでしょうが、なにぶん初心者ですのでご教授いただけると幸いです。

m.ts10806

2021/05/18 07:54

>かなり基本的なことなのでしょうが、なにぶん初心者ですのでご教授いただけると幸いです。質問に初心者アイコンをつけてください。それだけでこの文章を省略できます。（質問要件と無関係ですしね）

K.J.

2021/05/18 14:02

ご指摘ありがとうございます。

K.J.

2021/05/22 14:27

質問内容についても解決方法をご存知でしたら、ご回答いただけると嬉しいです！

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

回答1件

提示されているコードだけでは、おっしゃられている現象を再現できないのですが、
font-sizeをtransitionから省きたいのであれば、以下のようにすればできますよ。

CSS
1a {
2    display: inline-block;
3    transition: transform 0.5s
4    text-decoration: none;
5    font-size: 50px;
6}

投稿2021/05/18 08:29

root_jp

総合スコア4666

K.J.

2021/05/18 14:19

回答ありがとうございます。申し訳ございません。 .a:hover { transform: scale(1.2); } の部分記述違いで a:hover { transform: scale(1.2); } こちらが正しい表記でした。こちらの記述で質問文に書いた問題が発生しています(ホバー時に1.2倍になるのは良いが、起動時に16→50pxのアニメーションが起こる)。また、chrome, safari, firefoxで表示してみたところchromeのみで当該問題が発生するようです。改善方法分かりますでしょうか...？