Làm thế nào để hoạt ảnh css3 lặp lại mãi mãi

Tôi muốn có toàn bộ bộ ảnh động để phát mãi mãi. Khi bức ảnh cuối cùng biến mất, tôi muốn bức ảnh đầu tiên xuất hiện một lần nữa. Những gì tôi đã làm (và tôi không thích) được thiết lập trang để tải lại ở phần cuối của ảnh cuối cùng mờ dần. Có cách nào khác để làm điều này bằng cách sử dụng css ???Làm thế nào để hoạt ảnh css3 lặp lại mãi mãi

<html> 
    <head> 
     <style> 
.content{ 
    height: 400px !important; 
    /*margin: auto !important;*/ 
    overflow: hidden !important; 
    width: 780px !important; 
} 

.imgholder{ 
    height: 400px; 
    margin: auto; 
    width: 780px; 
} 

.photo1{ 
    opacity: 0; 
      animation: fadeinphoto 7s 1; 
     -moz-animation: fadeinphoto 7s 1; 
    -webkit-animation: fadeinphoto 7s 1; 
     -o-animation: fadeinphoto 7s 1; 
    float: left; 
    position: relative; 
    top: 0px; 
    z-index: 1; 
} 

.photo2 { 
    opacity: 0; 
      animation: fadeinphoto 7s 5s 1; 
     -moz-animation: fadeinphoto 7s 5s 1; 
    -webkit-animation: fadeinphoto 7s 5s 1; 
     -o-animation: fadeinphoto 7s 5s 1; 
    float: left; 
    position: relative; 
    top: -400px; 
    z-index: 1; 
} 
.photo3 { 
    opacity:0; 
      animation: fadeinphoto 7s 10s 1; 
     -moz-animation: fadeinphoto 7s 10s 1; 
    -webkit-animation: fadeinphoto 7s 10s 1; 
     -o-animation: fadeinphoto 7s 10s 1; 
    float: left; 
    position: relative; 
    top: -800px; 
    z-index: 1; 
} 

.photo4 { 
    opacity: 0; 
    animation: fadeinphoto 7s 15s 1; 
    -moz-animation: fadeinphoto 7s 15s 1; 
    -webkit-animation: fadeinphoto 7s 15s 1; 
    -o-animation: fadeinphoto 7s 15s 1; 
    float: left; 
    position: relative; 
    top: -1200px; 
    z-index: 1; 
} 

.photo5 { 
    opacity: 0; 
      animation: fadeinphoto 7s 20s 1; 
     -moz-animation: fadeinphoto 7s 20s 1; 
    -webkit-animation: fadeinphoto 7s 20s 1; 
     -o-animation: fadeinphoto 7s 20s 1; 
    float: left; 
    position: relative; 
    top: -1600px; 
    z-index: 1; 
} 

/* Animation Keyframes*/ 
@keyframes fadeinphoto { 
    0% { opacity: 0; } 
    50% { opacity: 1; } 
    100% { opacity: 0; } 
} 

@-moz-keyframes fadeinphoto { 
    0% { opacity: 0; } 
    50% { opacity: 1; } 
    A100% { opacity: 0; } 
} 

@-webkit-keyframes fadeinphoto { 
    0% { opacity: 0; } 
    50% { opacity: 1; } 
    100% { opacity: 0; } 
} 

@-o-keyframes fadeinphoto { 
    0% { opacity: 0; } 
    50% { opacity: 1; } 
    100% { opacity: 0; } 
} 
     </style> 
     <body> 
      <div class="content"> 
       <div class="imgholder"> 
        <img src="images/image1.jpg" width="780" height="400" class="photo1"/> 
        <img src="images/image2.JPG" width="780" height="400" class="photo2"/> 
        <img src="images/image3.JPG" width="780" height="400" class="photo3"/> 
        <img src="images/image4.jpg" width="780" height="400" class="photo4"/> 
        <img src="images/image5.jpg" width="780" height="400" class="photo5"/> 
       </div> 
      </div> 
     </body> 
    </head> 
</html>

Nguồn

2014-05-04 CuRSoR

gõ 'từ khóa infinite' cho' animation-lặp-count' –

thêm phong cách này

animation-iteration-count:infinite;

Nguồn

2014-05-04 16:28:21

cũng có thể được đề cập rằng con trỏ đã được xác định số lần lặp trong cách viết tắt: 'animation: fadeinphoto 7s 20s 1;' Số cuối cùng (1) là số lần lặp. Chỉ cần thay đổi điều này thành 'vô hạn' hoặc thêm quy tắc CSS đầy đủ như được đề xuất trong Câu trả lời của Elads. – agrm

Điều này sẽ gây ra M EI hoạt ảnh để phát mãi mãi. Tôi muốn có tất cả các hình động để chơi, cái khác, và sau đó lặp lại. Nếu bạn nhận thấy, ảnh đầu tiên xuất hiện ngay lập tức sau khi tải trang, các sarts thứ hai có thời gian trễ là 5 giây, ảnh thứ ba sau khoảng thời gian trễ là 10 giây và cứ tiếp tục như vậy. Nếu tôi đặt lặp của M EI thành vô hạn, nó sẽ làm cho thứ tự của các bức ảnh bị sai lệch. Có cách nào để "nhóm" tất cả các hình ảnh động với nhau và thiết lập lặp của toàn bộ nhóm thành vô hạn? – CuRSoR

bạn có thể thêm các khung hình chính vào mỗi ảnh sao cho tất cả các ảnh về bản chất đều lặp lại một hoạt ảnh dài, nhưng hoạt ảnh hiệu quả và sau đó chờ các hình ảnh khác. –

tôi stumbled khi cùng một vấn đề: một trang với nhiều hình ảnh động độc lập, mỗi người với các thông số riêng của mình, mà phải được lặp đi lặp lại mãi mãi.

Hợp nhất this clue với this other clue Tôi đã tìm thấy một giải pháp dễ dàng: sau khi kết thúc tất cả hoạt ảnh của bạn, gói div được khôi phục, buộc hoạt ảnh phải khởi động lại.

Tất cả bạn phải làm là thêm các vài dòng Javascript, dễ dàng như vậy họ thậm chí không cần bất kỳ thư viện bên ngoài, trong phần <head> trang của bạn:

<script> 
setInterval(function(){ 
var container = document.getElementById('content'); 
var tmp = container.innerHTML; 
container.innerHTML= tmp; 
}, 35000 // length of the whole show in milliseconds 
); 
</script>

BTW, đóng cửa </head> trong mã của bạn bị đặt không đúng chỗ: phải nằm trước số bắt đầu <body>.

Nguồn

2015-04-06 06:09:32

Rất tiếc, tôi không thể chỉnh sửa. Bạn không nên thêm dấu chấm phẩy sau khoảng thời gian (35000, trong trường hợp này), nếu không nó sẽ không hoạt động. Cảm ơn sự đóng góp. – Fernando

@Fernando Cảm ơn bạn đã sửa lỗi của tôi. –

Không sử dụng cái này. Điều này có thể dẫn đến một mớ hỗn độn lớn. Ví dụ. bạn phải đối phó với xử lý sự kiện đính kèm đính kèm và các công cụ như nhau. Cộng với DOM được điều chỉnh không có lý do. Trong trường hợp bạn có các nguồn bên ngoài bên trong đoạn mã này, chúng có thể thực sự được nạp lại mỗi khi bạn phát lại hoạt ảnh! Thay vào đó, chỉ cần thêm từ khóa 'initite' như trong các câu trả lời khác. – Hafenkranich

Trong khi giải pháp Elad sẽ làm việc, bạn cũng có thể làm điều đó inline:

-moz-animation: fadeinphoto 7s 20s infinite; 
-webkit-animation: fadeinphoto 7s 20s infinite; 
    -o-animation: fadeinphoto 7s 20s infinite; 
     animation: fadeinphoto 7s 20s infinite;

Nguồn

2015-06-22 04:49:41

Làm thế nào để hoạt ảnh css3 lặp lại mãi mãi

Trả lời

Các vấn đề liên quan