HTML Question

Second CSS transition tag not working

I have a function in wich I change the position of my div to the top right with a transition. Everything works fine to this point.

In this same function I have a

setTimeout
for 300 ms(0.3s).

After this time is passed another animation where the div gets 100%
width
.

The only thing not working is that this doesn't get animated.



function continuer() {
document.getElementById('fill').style.visibility = "hidden";
var title = document.getElementById('title').style;
title.top = "0";
title.left = "0";
title.border = "none";
title.transition = "0.2s";
setTimeout(function() {
title.right = "0";
title.transition = "1s";
}, (300));
}

* {
padding: 0;
margin: 0;
}
body {
background-color: black;
}
#fill {
background: black;
position: absolute;
height: 100%;
width: 100%;
}
header {
cursor: pointer;
top: 300px;
position: absolute;
left: 45%;
padding: 15px 6px;
border: 3px solid white;
background-image: url("http://images.123hdwallpapers.com/20150826/blurred-red-purple-colors-1920x1080.jpg");
}
h1 {
font-family: 'Raleway', sans-serif;
color: whitesmoke;
}

<div id="fill" onclick="continuer()"></div>
<header id="title" onclick="continuer()">
<h1>t e s t</h1>
</header>

</body>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>





Is even posible to have more than one of transition css tag in a function?

How can I get the animation working?

Answer

You dont have initial right property value, that's why animation doesn't working. Try to animate min-width instead:

 function continuer() {
      document.getElementById('fill').style.visibility = "hidden";
      var title = document.getElementById('title').style;
      title.top = "0";
      title.left = "0";
      title.border = "none";
      title.transition = "0.2s";
      setTimeout(function() {
        title.minWidth = "100%";
        title.transition = "1s";
      }, 300);
    }
    * {
      padding: 0;
      margin: 0;
    }
    body {
      background-color: black;
    }
    #fill {
      background: black;
      position: absolute;
      height: 100%;
      width: 100%;
    }
    header {
      box-sizing: border-box;
      cursor: pointer;
      top: 300px;
      position: absolute;
      min-width: 0;
      left: 45%;
      padding: 15px 6px;
      border: 3px solid white;
      background-image: url("http://images.123hdwallpapers.com/20150826/blurred-red-purple-colors-1920x1080.jpg");
    }
    h1 {
      font-family: 'Raleway', sans-serif;
      color: whitesmoke;
    }
<div id="fill" onclick="continuer()"></div>
<header id="title" onclick="continuer()">
  <h1>t e s t</h1>
</header>