问题描述:

Can anyone tell me why the code to this page only works in Chrome?

(I'm being asked to add some more details but I can't really think of any...)

It seems to work in all browsers if I only use background colours rather than images. Is it possible that images aren't included for animations yet?

<!DOCTYPE html>

<html>

<head>

<style>

div.slideshow

{

width:957px;

height:310px;

margin:0;

padding:0;

border:0;

border-collapse:collapse;

background-image:url('about.jpg');

position:relative;

animation-name:myfirst;

animation-duration:60s;

animation-timing-function:cubic-bezier(0.5,0,0.5,1);

animation-delay:5s;

animation-iteration-count:infinite;

animation-direction:normal;

animation-play-state:running;

/* Safari and Chrome: */

-webkit-animation-name:myfirst;

-webkit-animation-duration:60s;

-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);

-webkit-animation-delay:5s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:normal;

-webkit-animation-play-state:running;

}

@keyframes myfirst

{

0% {background-image:url('about.jpg');}

25% {background-image:url('exhibitions.jpg');}

50% {background-image:url('exhibitions2.jpg');}

75% {background-image:url('medical.jpg');}

100% {background-image:url('about.jpg');}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background-image:url('about.jpg');}

25% {background-image:url('exhibitions.jpg');}

50% {background-image:url('exhibitions2.jpg');}

75% {background-image:url('medical.jpg');}

100% {background-image:url('about.jpg');}

}

</style>

</head>

<body>

<div class="slideshow"></div>

</body>

</html>

网友答案:

You should either add the moz and o prefixes, or get the Prefix-Free library and remove the webkit section to fix the prefixes. background-images should be just as animatable as colors, but I could be wrong.

相关阅读:
Top