在过渡状态中保持CSS过渡

Question

我有一个搜索栏，一旦被聚焦，它就会通过CSS过渡进行扩展，但是只要单击它之外的任何内容，它都会重置为其原始位置。我尝试更改位置并使用animation-fill-mode: forwards，但都无法正常工作！ （我以为后者在过渡时不起作用，但仍然被告知尝试。）我在堆栈上找到的每个其他类似线程都仅提供这两个选项...

HTML：

<div class="search">
    <input id="searchBar" placeholder="Enter search">
    <button id="searchButton" onclick="getData()">SEARCH</button>
</div>

相关CSS：

#searchBar {
    border-style: solid;
    border-color: #29B6F6;
    font-size: 30px;
    padding: 15px;
}

#searchBar:focus {
    outline: none;
    color: #29B6F6;
    padding-right: 35%;
    transition: 1s;
}

jsfiddle（包含完整代码）