CSS3滑塊動畫發行

Question

​​

在下半區，你會看到投資組合的div和短的事實，這是不集中，我試圖做一些關於它的CSS3動畫來模擬一個滑塊。但是，我有一段時間試圖讓它工作。

Here is a link to the CodePen.

短的顏色，而不是坐在底部在任何時候都不要」工作頁腳要設置高度，我需要幫助，試圖找出在那裏我有去錯了我的滑塊中從左到右的過渡。

我正在關注兩個不同的教程，並試圖剖析它們以實現我在這裏的目標。我經歷的路線，而不是使用JavaScript的主要原因是

• 我還沒學會它尚未
• 我覺得CSS是要轉變成一個非常，非常強大的工具。

我的目標是讓我的整個投資組合網站免費的JavaScript。

如果有人可以看看並提供建議，那太棒了！

Answer 1

這是一個FIDDLE，它是一個純粹的CSS滑塊，我從HERE中扣除。 您可以將HTML插入到您的中間div，然後添加CSS並進行一些調整。

你能解釋一下你的問題嗎？

的HTML是直接的，而這裏的CSS：

img { 
    width: 400px; 
    height: 300px; 
} 
#slider { 
    background: #000; 
    border: 5px solid #eaeaea; 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
    height: 300px; 
    width: 400px; 
    margin: 40px auto 0; 
    overflow: visible; 
    position: relative; 
} 
#mask { 
    overflow: hidden; 
    height: 320px; 
} 
@keyframes cycle { 
    0% { top: 0px; } 
    4% { top: 0px; } 
    16% { top: 0px; opacity:1; z-index:0; } 
    20% { top: 325px; opacity: 0; z-index: 0; } 
    21% { top: -325px; opacity: 0; z-index: -1; } 
    92% { top: -325px; opacity: 0; z-index: 0; } 
    96% { top: -325px; opacity: 0; } 
    100%{ top: 0px; opacity: 1; } 
} 
@keyframes cycletwo { 
    0% { top: -325px; opacity: 0; } 
    16% { top: -325px; opacity: 0; } 
    20% { top: 0px; opacity: 1; } 
    24% { top: 0px; opacity: 1; } 
    36% { top: 0px; opacity: 1; z-index: 0; } 
    40% { top: 325px; opacity: 0; z-index: 0; } 
    41% { top: -325px; opacity: 0; z-index: -1; } 
    100%{ top: -325px; opacity: 0; z-index: -1; } 
} 
@keyframes cyclethree { 
    0% { top: -325px; opacity: 0; } 
    36% { top: -325px; opacity: 0; } 
    40% { top: 0px; opacity: 1; } 
    44% { top: 0px; opacity: 1; } 
    56% { top: 0px; opacity: 1; } 
    60% { top: 325px; opacity: 0; z-index: 0; } 
    61% { top: -325px; opacity: 0; z-index: -1; } 
    100%{ top: -325px; opacity: 0; z-index: -1; } 
} 
@keyframes cyclefour { 
    0% { top: -325px; opacity: 0; } 
    56% { top: -325px; opacity: 0; } 
    60% { top: 0px; opacity: 1; } 
    64% { top: 0px; opacity: 1; } 
    76% { top: 0px; opacity: 1; z-index: 0; } 
    80% { top: 325px; opacity: 0; z-index: 0; } 
    81% { top: -325px; opacity: 0; z-index: -1; } 
    100%{ top: -325px; opacity: 0; z-index: -1; } 
} 
@keyframes cyclefive { 
    0% { top: -325px; opacity: 0; } 
    76% { top: -325px; opacity: 0; } 
    80% { top: 0px; opacity: 1; } 
    84% { top: 0px; opacity: 1; } 
    96% { top: 0px; opacity: 1; z-index: 0; } 
    100%{ top: 325px; opacity: 0; z-index: 0; } 
} 
@keyframes move { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(100px); } 
} 
@keyframes move { 
    0% { transform: translateX(0); } 
    50% { transform: translateX(20px); } 
    100% { transform: translateX(100px); } 
} 
#slider ul { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#slider li { 
    width: 680px; 
    height: 320px; 
    position: absolute; 
    top: -325px; 
    list-style: none; 
} 
#slider li.firstanimation { 
    animation: cycle 25s linear infinite;   
} 
#slider li.secondanimation { 
    animation: cycletwo 25s linear infinite; 
} 
#slider li.thirdanimation { 
    animation: cyclethree 25s linear infinite;  
} 
#slider li.fourthanimation { 
    animation: cyclefour 25s linear infinite;   
} 
#slider li.fifthanimation { 
    animation: cyclefive 25s linear infinite;   
}