CSS transition values in "from" and "to" states - css

Question

I've been trying to use a transition-delay when moving from "state A" to "state B" but not having that delay when moving back to state A. This is a general question though about whether the CSS spec says that the settings for a transition should be those when the transition starts or those from the state which is being transitioned to. Here is an example:
.menu {
transform: translateX(0%);
transition: transform 1s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 5s ease-out;
}
Should the opening animation animation take 1 second or 5 seconds?
My code is slightly more complicated as it uses a delay, but basically it boils down to this.
.menu {
transform: translateX(0%);
transition: transform 0.5s ease-out 0;
}
.menu.is-open {
transform: translateX(100%);
transition: transform 0.5s ease-out 0.5s;
}
When I try this in Chrome or Firefox I get a delay when opening the menu and no delay when closing the menu, but in IE11/Edge it behaves as it would without the delay set. So I'm not sure whether this is a browser bug, or whether I've misunderstood how transitions work, hence my more general question about which transitions are used.

Answer 1

It should be transition: transform and not transition: translate
The transition rule accepts CSS properties not values
Try reversing the order so that the .menu gets the half second delay
.menu{
transform: translateX(0%);
transition: transform 0.5s 0.5s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 0.5s 0s ease-out;
}
As for not working in IE, see vendor prefixes for transition and transform

Answer 2

Seems like you understood correctly how transition works. See my code snippet:
JSFiddle
.hoverable {
height: 50px;
background-color: yellow;
}
.moving {
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: transform 1s linear 0s;
transition: -ms-transform 1s linear 0s;
transition: transform 1s linear 0s;
}
.hoverable:hover + .moving {
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
-webkit-transition: transform 0.5s linear 0.5s;
transition: -ms-transform 0.5s linear 0.5s;
transition: transform 0.5s linear 0.5s;
}
<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>
Maybe transition-timing-function: ease-out seems like delay for you in some cases, so I used transition-timing-function: linear in my example to show the transition with a constant speed.
The red block moves from 0% to 200% for 0.5s with 0.5s delay. And moves from 200% to 0% for 1s without delay. There is no any magic with how transition works.