Edit in JSFiddle

$('#play').click(function(){
    $(this).css('display','none');
    $('#pause').css('display','block');
    $('.cover').addClass('paused');
});
$('#pause').click(function(){
    $(this).css('display','none');
    $('#play').css('display','block');
    $('.cover').removeClass('paused');
});
<div id="jukebox">
    <div id="wrapper">
        <div id="cover" class="cover">
            <img id="img" src="http://musicdata.baidu.com/data2/pic/115551937/115551937.jpg" />
        </div>
    </div>
    <div id="play"></div>
    <div id="pause" style="display:none;"></div>
</div>
#jukebox{
    position: relative;
}
#wrapper{
    width:121px;
    height:121px;
    overflow:hidden;
}
.cover{
    width: 121px;
    height: 121px;
    border-radius: 50%;
    overflow: hidden;
    animation: jukebox 10s linear infinite;
    -webkit-animation: jukebox 10s linear infinite;
    -moz-animation: jukebox 10s linear infinite;
    -ms-animation: jukebox 10s linear infinite;
    -o-animation: jukebox 10s linear infinite;
}
.paused{
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
}
@keyframes jukebox{
    from{
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }
}

@-webkit-keyframes jukebox{
    from{
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }
}
@-moz-keyframes jukebox{
    from{
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }
}
@-ms-keyframes jukebox{
    from{
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }
}
@-o-keyframes jukebox{
    from{
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }
}
#img{
    width:143px;
    height:143px;
    margin-left: -11px;
    margin-top: -11px;
}
#play {
    position: absolute;
    top: 50px;
    left: 52px;
    width: 5px;
    height: 20px;
    border: 6px solid #FFF;
    border-top: none;
    border-bottom: none;
}
#pause {
    position: absolute;
    top: 48px;
    left: 50px;
    width: 0;
    height: 0;
    border: 15px solid rgba(0, 0, 0, 0);
    border-left: 20px solid #FFF;
}
#play:hover{
    border-color: #ddd;
    cursor: pointer;
}
#pause:hover {
    border-left-color: #ddd;
    cursor: pointer;
}