当您单击虚拟按钮，然后选择不见了。你需要这种方式绑定到mousedown事件：

function addAnimation() {

selectedElement = window.getSelection().focusNode.parentNode;

$(selectedElement).addClass('grad');

}

$('.animate-selected').on('mousedown', addAnimation);

.text-field {

background: #333;

color: #fff;

width: 300px;

height: 100px;

}

.grad {

-webkit-animation: changeColor 8s ease-in infinite;

animation: changeColor 8s ease-in infinite;

}

.animate-selected{

margin: 2px 0;

border: 1px solid blue;

display: inline-block;

padding: 0 4px;

cursor: pointer;

}

@-webkit-keyframes changeColor {

0% {

color: #ff7473;

}

25% {

color: #ffc952;

}

50% {

color: #fc913a

}

75% {

color: #75D701;

}

100% {

color: #ff7473

}

}

如果你想动画只选定的文本，比你做这种方式：

function addAnimation() {

$('.grad').contents().unwrap(); /* this removes previous animation */

var selectedText = window.getSelection();

var container = $(selectedText.anchorNode.parentNode);

var wrappedText = '' + selectedText + ''

container.html(container.html().replace(selectedText, wrappedText));

}

$('.animate-selected').on('mousedown', function(e) {

addAnimation();

});

.text-field {

background: #333;

color: #fff;

width: 300px;

height: 100px;

}

.grad {

-webkit-animation: changeColor 8s ease-in infinite;

animation: changeColor 8s ease-in infinite;

}

.animate-selected{

margin: 2px 0;

border: 1px solid blue;

display: inline-block;

padding: 0 4px;

cursor: pointer;

}

@-webkit-keyframes changeColor {

0% {

color: #ff7473;

}

25% {

color: #ffc952;

}

50% {

color: #fc913a

}

75% {

color: #75D701;

}

100% {

color: #ff7473

}

}