使用关键帧CSS更改内容

Question

我想要创建一个按钮，该按钮在悬停1秒后旋转并在动画期间更改其内容。我正在使用FontAwesome，并希望在悬停时变成一个“x”按钮的删除按钮。 Here is a fiddle。

理想情况下，动画也会在不移动时倒退。

那么如何在动画过程中更改伪元素的内容呢？

这是我的关键帧动画：

@-webkit-keyframes { 
    0% { 
     content:'\f056'; 
     -webkit-transform:rotate(0deg); 
    } 
    50% { 
     content:'\f057'; 
     -webkit-transform:rotate(360deg); 
    } 
    100% { 
     -webkit-transform:rotate(720deg); 
    } 
} 

Answer 1

小FIDDLE，我希望能帮助你。

CSS

.outside { 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    background-color: red; 
    border: 10px solid blue; 
    color: white; 
    text-align: center; 
    line-height: 30px; 
    transition: all 3s ease; 
    transition-property: transform; 
} 
.outside:hover { 
    transform: rotate(1080deg); 
} 

JS

$('.outside').hover(
    function() 
     { 
     $('.outside').html('X'); 
     }, 
    function() 
     { 
     $('.outside').html('D'); 
     } 
        );