Necesito que el contenido de mi h1 aparezca de manera no tan brusca al presionar mi button, intenté poniéndole una transición, desapareciendo el elemento y después volviéndolo a aparecer con Javascript, pero no resultó.
function saludo(){
document.getElementById('hola').style.display="inline";
}
h1{
display: none;
transition: 10s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="practica.css">
</head>
<body>
<button class="resultado" onclick="saludo()">resultado</button>
<h1 id="hola">Hola colombiaaaaaaaa</h1>
<script type="text/javascript" src="practica.js"></script>
</body>
</html>