Transizione overlay con Javascript

[lucavizzi]

<button class="primaryButton" onclick="showPopup()">Chi Siamo</button>


<div id = "popup1" class = "overlay" style='visibility:hidden'>
            <div class = "popup">
                <h2>Chi Siamo</h2>
                <a class = "close" onclick='closePopup()'>×</a>
                <div class = "content">
                   testo overlay
                </div>
            </div>
        </div>
<script>
function showPopup(){
 document.getElementById('popup1').setAttribute('style',' opacity:1; visibility:visible' );
     }

</script>

CSS: #popup1     {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 700ms;
        opacity: 0;
    }

Codice funzionante