Optimisation simple javascript et transition ?

Bonjour,
Pour afficher cacher un texte je fais ceci :

<div id="text1" style="display:none;"><p>Du texte</p></div>

var text1 = document.getElementById('text1');
var bouton= document.getElementById('bouton');

bouton.onmouseover = function() {
text1.style="display:;";};
bouton.onmouseout = function() {
text1.style="display:none;";};

Mais je pense que ce n'est pas optimisé, et ma question est :
Comment faire une animation = une transition entre le texte invisible et visible ?
Merci beaucoup !
Have a nice day