SOURCE

var test = document.getElementById('test4');
test.onclick = function () {
    test.style.width = '300px';
    setTimeout(function () {
        test.style.width = '100px';
    }, 3000);
}

<div class="test1">hover触发</div>
<br />
<div class="test2">active触发</div>
<br />
<div>
    <input class="test3" placeholder="foucs触发">
</div>
<br />
<div id="test4" class="test4">点击触发</div>

 .test1 {
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
    /* 	以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}

.test1:hover {
    width: 500px;
}

 .test2 {
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
}

.test2:active {
    width: 500px;
}

.test3 {
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
    border: 0;
}

.test3:focus {
    width: 500px;
}

.test4 {
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
}