Transition examples

by John Hart

HTML

<div id="birthday">Surprise Party</div>
<p></p>
<button onclick="blue()">Blue</button>
<button onclick="red()">Red</button>
<button onclick="transparent()">Transparent</button>
<button onclick="gone()">Run Away</button>

<script>
function blue()
{
    element=document.getElementById("birthday");
    
    element.innerHTML="Happy";
    
    element.style.display="inherit";
    element.style.background="blue";
    element.style.width="150px";
    element.style.opacity="1.0";
    element.style.transition="width 2s,background 15s,opacity 2s";
}

function red()
{
    element=document.getElementById("birthday");
    
    element.innerHTML="Birthday";
    
    element.style.display="inherit";
    element.style.background="red";
    element.style.width="300px";
    element.style.opacity="0.5";
    element.style.transition="width 2s,background 4s,opacity 6s";
}
    
function transparent()
{
    element=document.getElementById("birthday");
    
    element.innerHTML="Eeeeek!";
    
    element.style.display="inherit";
    element.style.opacity="0.0";
    element.style.transiton="opacity 1s";
}    

function gone()
{
    element=document.getElementById("birthday");

    element.style.display="none";
}    
</script>

<!-- question:
     Why does clicking a button disable div:hover? -->

<!-- answer:
     these attributes in the CSS were not marked as !important and inline attributes override CSS attributes -->

CSS

div
{
    width:100px;
    height:50px;
    background:gray;
    transition:width 2s,opacity 2s,background 15s;
}

div:hover
{
    width:200px !important;
    background:green !important;
    opacity:0.25 !important;
    transition-timing-function:linear;
    transition:width 2s,background 4s,opacity 6s;
}