连续CSS转换 [英] Continuous CSS transitions

问题描述

有没有办法使用CSS3转换连续为背景图片的 background-position 属性设置动画？

解决方案

是的，这是可能的 - DEMO

  div 
 {
 background：url（http://lorempixel.com/100/ 100）; 
 height：100px; 
 width：100px; 
 
 -webkit-animation：slide 2s linear infinite; 
 -moz-animation：slide 2s linear infinite; 
 animation：slide 2s线性无限; 
} 
 
 
 @ -webkit-keyframes slide 
 {
 0％{background-position：0 0;} 
 100％ background-position：100px 0;} 
} 
 
 @ -moz-keyframes slide 
 {
 0％{background-position：0 0;} 
 100％{background-position：100px 0;} 
} 
 
 @keyframes slide 
 {
 0％{background-position：0 0;} 
 100％{background-position：100px 0;} 
} 
  

/ p>

Is there a way to continuously animate a background image's background-position property using CSS3 transitions?

解决方案

Yes, it's possible - DEMO

div
{
    background: url(http://lorempixel.com/100/100);
    height: 100px;
    width: 100px;

    -webkit-animation: slide 2s linear infinite;
       -moz-animation: slide 2s linear infinite;
            animation: slide 2s linear infinite;
}


@-webkit-keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}​

@-moz-keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}

@keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}

​

这篇关于连续CSS转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！