動畫元素的定位

我爲客戶端創建了一個css動畫here。實際上有兩個獨立但同步的動畫正在運行。目前，我將它們定位爲「絕對」，除了在移動設備上因定位而被推向右側以外，它們工作良好。如果我將它們定位爲「相對」，則只有正確的文本動畫才能起作用，而左側的圖片動畫只顯示圖像的一小部分。我錯過了什麼？您的意見非常感謝。 CSS代碼如下：動畫元素的定位

/*SLIDESHOWS IMAGES*/ 

.slideshow 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

.slideshow li span 
{ 
    width:453px; 
    height:340px; 
    position:absolute; 
    top:91px; 
    left:175px; 
    color:transparent; 
    background-image:url('images/banner.jpg'); 
    background-size:cover; 
    background-repeat:none; 
    opacity:0; 
    z-index:0; 

    -webkit-animation: myfirst 60s linear infinite 0s; 

    -moz-animation: myfirst 60s linear infinite 0s; 

    -o-animation: myfirst 60s linear infinite 0s; 

    -ms-animation: myfirst 60s linear infinite 0s; 

    animation: myfirst 60s linear infinite 0s; 
} 

.slideshow li:nth-child(1) span 
{ 
    background-image:url('images/banner.jpg'); 
} 

.slideshow li:nth-child(2) span 
{ 
    background-image:url('images/banner-2.jpg'); 
    -webkit-animation-delay:15s; 
    -moz-animation-delay:15s; 
    -o-animation-delay:15s; 
    -ms-animation-delay:15s; 
    animation-delay:15s; 
} 

.slideshow li:nth-child(3) span 
{ 
    background-image:url('images/banner-3.jpg'); 
    -webkit-animation-delay:30s; 
    -moz-animation-delay:30s; 
    -o-animation-delay:30s; 
    -ms-animation-delay:30s; 
    animation-delay:30s; 
} 

.slideshow li:nth-child(4) span 
{ 
    background-image:url('images/banner-4.jpg'); 
    -webkit-animation-delay:45s; 
    -moz-animation-delay:45s; 
    -o-animation-delay:45s; 
    -ms-animation-delay:45s; 
    animation-delay:45s; 
} 

@-webkit-keyframes myfirst 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@-moz-keyframes myfirst 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@-o-keyframes myfirst 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@-ms-keyframes myfirst 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@keyframes myfirst 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 




/*SLIDESHOWS TEXT*/ 

.slogan 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

.slogan li div 
{ 
    width:453px; 
    height:200px; 
    padding-left:20px; 
    padding-top:40px; 
    padding-right:10px; 
    padding-bottom:10px; 
    font-family:'Lucida Handwriting'; 
    box-shadow: 10px 10px 10px #888888; 
    position:absolute; 
    top:170px; 
    left:675px; 
    color:#cf112d; 
    opacity:0; 
    z-index:0; 

    -webkit-animation: mysecond 60s linear infinite 0s; 

    -moz-animation: mysecond 60s linear infinite 0s; 

    -o-animation: mysecond 60s linear infinite 0s; 

    -ms-animation: mysecond 60s linear infinite 0s; 

    animation: mysecond 60s linear infinite 0s; 
} 

.slogan li:nth-child(1) div 
{ 
    background-color:#ffffff; 
} 

.slogan li:nth-child(2) div 
{ 
    background-color:#ffffff; 
    -webkit-animation-delay:15s; 
    -moz-animation-delay:15s; 
    -o-animation-delay:15s; 
    -ms-animation-delay:15s; 
    animation-delay:15s; 
} 

.slogan li:nth-child(3) div 
{ 
    background-color:#ffffff; 
    -webkit-animation-delay:30s; 
    -moz-animation-delay:30s; 
    -o-animation-delay:30s; 
    -ms-animation-delay:30s; 
    animation-delay:30s; 
} 

.slogan li:nth-child(4) div 
{ 
    background-color:#ffffff; 
    -webkit-animation-delay:45s; 
    -moz-animation-delay:45s; 
    -o-animation-delay:45s; 
    -ms-animation-delay:45s; 
    animation-delay:45s; 
} 

@-webkit-keyframes mysecond 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@-moz-keyframes mysecond 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@-o-keyframes mysecond 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@-ms-keyframes mysecond 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
} 

@keyframes mysecond 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; } 
    12% { opacity: 1; animation-timing-function: ease-out; } 
    24% { opacity: 1; } 
    40% { opacity: 0; } 
    100% { opacity: 0; } 
}

來源

2014-01-15 Rolf

請勿在SO中發佈直接鏈接。編輯你的問題，並添加相關的HTML代碼和一個操場，如jsfiddle.net，jsbin.com等。 – Ravimallya

現在你正在定位你的元素絕對相對於整個頁面。你想要做的是將你的元素相對於包裝器絕對定位。可以是這樣做的：

.slideshow, .slogan { 
    position:relative; 
} 
.slideshow li span { 
    top:0; 
    left:0; 
} 
.slogan li div { 
    right: 15px; 
    top: 80px; 
}

請注意，我只是添加/這裏覆蓋相關屬性。因此，將這些更改集成到您的CSS中。

來源

2014-01-15 09:13:06 jwktje

動畫元素的定位

回答

相關問題