Put transition only on the normal state:

.design-box {
  transition: all 1s ease;
}

Have a look at the snippet below:

.design-box {
  width: 100%;
  height: 250px;
  margin: 100px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  transition: all 1s ease;
}

.design-box:hover {
  border-radius: 0;
}

<div class="design-box"></div>

So the transition takes place on the hover but not on the off. So you need to set the transition on the element without the hover state.

for example: for your demo add

li.searchbar a.searchbar-text {
  transition:all .5s ease;
}

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

The definition of hover is:

The :hover selector is used to select elements when you mouse over them.

By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Add the transition properties to the element itself rather than the :hover pseudo-class version.

In doing so, the transition will take place when hovering on and off.

Updated Example

.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur" />

If you want different transition properties when hovering on/off, see this example.

• The transition property on the element itself will take place when hovering off of the element.

• The transition on the :hover pseudo class will take place when hovering on the element:

.img-blur {
    transition: all 0.35s ease-in-out;   /* Hover off */
}
.img-blur:hover {
    -moz-filter: blur(4px);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    transition: all 1s ease-in;         /* On hover */
}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

If you want text to be added on hover, take a look at either of these past answers.

• https://stackoverflow.com/a/18322705/2680216

• https://stackoverflow.com/a/21371665/2680216