Как отключить анимацию при обновление страницы transform и transfition
Мне нужно, чтобы при обновление страницы не было начальной анимации, а сразу кнопка была такой, какая она на втором фото
Это самое начало при обновление страницы (не обращайте внимание на остальное, кроме кнопки, которая меняется)
Это после анимации и обновления страницы
"Если навести мышкой на эту кнопку, то она плавно уменьшится. Только так и должно работать. А начальная анимация не нужна"
#suda{
text-align: center;
color: purple;
font-size: 40px;
border: 1px solid red;
background-color: pink;
padding: 10px;
margin-right: 200px;
margin-left: 200px;
border-radius: 200px;
opacity: 0.7;
box-shadow: 2px 2px 3px grey;
transform: scale(0.8);
transition: 1s all;
}
#suda:hover{
opacity: 1;
box-shadow: 3px 3px 4px grey;
transform: rotate(0deg) scale(0.7);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тест</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="suda"><a id="none" href="ссылка">Если хочешь послушать музыку, тогда тебе сюда)</a></div>
</body>
</html>