[英]Animation Not Working in IE11
我有一個滾動條,在IE中不起作用。 雖然可以在Firefox,Chrome和Opera中正常運行。 這是我的HTML:
<div id="container">
<div class="photobanner">
<a class="first" href="http://www.site1.com" ><img src="/images/image1.jpg" alt="site1"></img></a>
<a href="http://www.site2.com"><img src="/images/site2.jpg" alt="site2"></img></a>
<a href="http://www.site3.ca"><img src="/images/image3.jpg" alt="site3"></img></a>
<a href="http://www.site4.org"><img src="/images/image4.jpg" alt="site4"></img></a>
<a href="http://www.site1.com" ><img src="/images/image1.jpg" alt="site1"></img></a>
<a href="http://www.site2.com"><img src="/images/image2.jpg" alt="site2"></img></a>
</div>
</div>
我的理解是-ms-transform應該可以在IE9及更高版本中使用,但事實並非如此,這是我的CSS:
.photobanner {
width: 3805px;
}
.photobanner img {
height: 175px;
margin: 25px 0px 25px 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
@-moz-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
任何想法,我怎樣才能使它工作???
只需從您的@keyframes名稱中刪除"
引號即可。像這樣:
@-webkit-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
@keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
http://jsfiddle.net/z5ep9hjk/1/
另外,它也不會在IE 9上運行http://caniuse.com/#feat=css-animation,因為它不支持動畫屬性。
您必須從@keyframes中刪除雙引號( "
),然后才能在IE11中使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.