yuriymos,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.hot{
width: 300px;
height: 100px;
border: 1px dashed Gray;
padding: 5px;
}
.Red{
background-color: Red;
transition-duration: 8s;
opacity: 0;
}
</style>
</head>
<body>
<button id="show-PersonalToolbar">show-PersonalToolbar</button>
<div class="hot Red" id="PersonalToolbar"></div>
<script>
PersonalToolbar = document.getElementById('PersonalToolbar');
document.getElementById("show-PersonalToolbar").onmouseover = function() {
PersonalToolbar.style.marginTop = "inherit";
PersonalToolbar.style.opacity = "1.0";
PersonalToolbar.style.transitionDelay = "0.3s";
}
</script>
</body>
</html>