CSS3是怎么实现全景特效？

很有意思的全景动画：（直接上代码）

html部分：

<div class="panorama"></div>

css部分：

.panorama{
    width: 300px;height: 300px;
    cursor: pointer;
    background-image: url(01.jpg);/*这个图要大于容器的宽度300px*/
    background-size: auto 100%;
    animation: panorama 3s linear infinite alternate;/*linear运动的曲线类型，infinite无限循环，alternate运动到头反向运动*/    animation-play-state: paused;/*这个属性是让动画暂停*/}

.panorama:hover{
    animation-play-state: running;/*这个属性是让动画动起来*/
}
@keyframes panorama{
　　from{
　　　　background-position: 0 0;
　　}/*from为默认的情况下可以不填写*/
　　to{
　　　　background-position: 100% 0;
　　}
}