CSS3動畫從左向右移動，然後繼續從外部移動到左

紅色框出現在其containter中間當頁面第一次加載，然後從移動從左到右，再出現這樣的形象：CSS3動畫從左向右移動，然後繼續從外部移動到左

enter image description here

這裏就是我這樣做遠，但它不適合上面的想法：

.box{ 
    -webkit-animation: left-to-right 10s infinite; /* Chrome, Safari, Opera */ 
    animation: left-to-right 10s infinite; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes left-to-right { 
    100%{ 
     left:-1000px 
    } 
} 

@keyframes left-to-right { 
    100%{ 
     left:-1000px 
    } 
}

頁面寬度爲1280px和箱寬度爲1000像素。

來源

2015-04-07 Lee

哪一個你想繼續從外面移動到左邊？正方形或長方形？ – EddNewGate

正方形是內容外部的矩形的一部分。這裏只有一個移動對象：紅色矩形 – Lee

您是否嘗試過您的代碼，看看它是如何工作的？在以您爲例的發佈的動畫中，您將移動兩個對象：從左到右的矩形和從右到左的正方形。發佈代碼後，您的動畫甚至不會像您的示例那樣移動。 – EddNewGate

您可以使用此：

http://codepen.io/anon/pen/dPEJzm

<div id="animated-example" class="animated shake"></div> 



.animated { 
    -webkit-animation-duration: 5s; 
    animation-duration: 5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-50px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(50px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-50px);} 
    20%, 40%, 60%, 80% {transform: translateX(50px);} 
} 
.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
} 
.shake { 
    background:red; 
    height:100px; 
    width:100px; 

}

來源

2015-04-07 07:47:42

http://jsfiddle.net/bvjzmke5/3/

我使其在2秒完成，用來-50％移動，那不過你想要的改變。

.box{ 
    -webkit-animation: right-to-left 2s linear infinite; /* Chrome, Safari, Opera */ 
    animation: right-to-left 2s linear infinite; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes right-to-left { 

    100%{ 
     left:-50% 
     }  
} 

@keyframes left-to-right { 

    100%{ 
     left:-50% 
     }  

} 

.square{ 
    -webkit-animation: left-to-right 2s linear infinite; /* Chrome, Safari, Opera */ 
    animation: left-to-right 2s linear infinite; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes left-to-right { 

    100%{ 
     right:-50% 
     }  
} 

@keyframes left-to-right { 
    100%{ 
     right:-50% 
     } 
} 

<div id="container" style="height:100px; width:60%; margin:0 auto"> 
<div class="box" style="height:100px; width:50%;background:red;position:relative;display:inline-block"></div> 
<div class="square" style="height:100px; width:100px; background:red;position:relative;display:inline-block"></div> 
</div>

來源

2015-04-07 08:59:29 EddNewGate

CSS3動畫從左向右移動，然後繼續從外部移動到左

回答

相關問題