[分享]css3怎么设置ie8支持动画

在现代网页设计中，CSS3已经成为了不可或缺的一部分，但有时候我们还需要在老旧的浏览器如IE8中进行相应的兼容，那么我们该如何设置才能让IE8支持CSS3的动画呢？下面是一些实用的方法。首先，我们需要...

在现代网页设计中，CSS3已经成为了不可或缺的一部分，但有时候我们还需要在老旧的浏览器如IE8中进行相应的兼容，那么我们该如何设置才能让IE8支持CSS3的动画呢？下面是一些实用的方法。

首先，我们需要引入一个JavaScript库来帮助IE8解析CSS3动画，这里我们推荐使用CSS3PIE。

<!-- CSS3PIE -->
<!--[if lt IE 9]>
    <script src="js/PIE_IE678.js"></script>
    <style>
        /* 设置PIE支持的样式属于 */
        .pie {
            behavior: url(js/PIE_IE678.htc);
        }
    </style>
<![endif]--> 

接下来，我们需要添加相应的CSS3动画样式。

/* CSS3 动画 */
.animate {
    /* Safari 和 Chrome */
    -webkit-animation: myfirst 5s;
    /* Opera */
    -o-animation: myfirst 5s;
    /* Firefox */
    -moz-animation: myfirst 5s;
    /* 标准语法 */
    animation: myfirst 5s;
}

/* 关键帧 */
@keyframes myfirst {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
} 

然后，我们需要给需要动画效果的元素添加相应的类，并指定PIE类以支持IE8。

<div class="animate pie">我是一个需要动画效果的元素</div> 

最后，我们需要在CSS3PIE中指定支持的样式，这里我们将opacity属性加入样式属于PIE支持的列表中。

/* 支持的CSS3样式 */
-pie-background: #ccc;
pie-behavior: url('js/PIE.htc');
pie-track-hover: true;
-pie-lazy-init: true;
pie-poll-freq: 100;
pie-slice: 12;
-pie-track-animation: myfirst;
/* 不支持的CSS3样式 */
-pie-png-fix: true;
-pie-border-radius: 5px;
-pie-box-shadow: 0 0 5px #888;
-pie-opacity: 0.8; 

以上就是让IE8支持CSS3动画的基本方法，希望对大家有所帮助。