Hoạt ảnh CSS3: hộp lớp phủ nhấp nháy

Question

Tôi muốn tạo phần tử phủ lên một phần của trang bằng cách sử dụng vị trí: tuyệt đối. Phần tử này sẽ có độ mờ 50% và nhấp nháy giữa màu đỏ và trong suốt. Một chút giống như những gì OSX sử dụng (được sử dụng?) Để làm cho nút mặc định của một hộp thoại.

Làm cách nào để tạo vòng lặp hoạt ảnh vô hạn bằng CSS3?

Làm cách nào để chuyển đổi giữa hai màu nền trong vòng lặp này?

Trình duyệt nào có thể hỗ trợ hôm nay thông qua hoạt ảnh CSS3?

Hoạt ảnh jQuery là một thay thế, nhưng tôi muốn thử phương pháp CSS3 trước tiên.

Answer 1

Hai câu hỏi đầu tiên được trả lời bởi spec.

Để lặp: animation-iteration-count: infinite;

Và đi xe đạp màu nền liên quan đến việc xác định một quy tắc @keyframes.

body { background: #0ff; } 

@-webkit-keyframes blink { 
    0% { background: rgba(255,0,0,0.5); } 
    50% { background: rgba(255,0,0,0); } 
    100% { background: rgba(255,0,0,0.5); } 
} 

@keyframes blink { 
    0% { background: rgba(255,0,0,0.5); } 
    50% { background: rgba(255,0,0,0); } 
    100% { background: rgba(255,0,0,0.5); } 
} 

#animate { 
    height: 100px; 
    width: 100px; 
    background: rgba(255,0,0,1); 
} 

#animate { 
    -webkit-animation-direction: normal; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: blink; 
    -webkit-animation-timing-function: ease; 

    animation-direction: normal; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
    animation-name: blink; 
    animation-timing-function: ease;  
} 

(đừng quên bất kỳ tiền tố nhà cung cấp áp dụng!)

Theo như hỗ trợ trình duyệt đi, tôi không thể cho bạn biết chi tiết cụ thể, nhưng trong mọi trường hợp tôi muốn giới thiệu tính năng phát hiện qua modernizr và một javascript dự phòng.

Dưới đây là example hoạt động trong webkit và đáp ứng ít nhất một số yêu cầu của bạn. LƯU Ý: Tôi không sử dụng một mac vì vậy tôi đã không chắc chắn các chi tiết cụ thể của hiệu ứng bạn tham chiếu.

Answer 2

Khi bạn đã thiết lập hoạt ảnh trong biểu định kiểu (-webkit-transition :), bạn có thể chỉ cần thay đổi màu bằng JavaScript.

function toggleColor(element) 
{ 
    var red = "rgba(255,0,0,0.5)"; 
    var transparent = "rgba(255,0,0,0)"; 
    element.style.backgroundColor = ((element.style.backgroundColor == red) ? transparent : red); 
    window.setTimeout(function() 
    { 
     toggleColor(element); 
    }); 
} 

Hiện tại, chỉ các trình duyệt Webkit (Safari & Chrome) hỗ trợ CSS-Ảnh động.