即视差滑块的9个浏览器错误动画效果

时间:2012-12-26 17:14:02

标签: jquery jquery-ui css3 jquery-plugins css-transitions

我实现了视差滑块,它使用css中的动画属性在chrome中工作正常,但在动画属性中不起作用

如何在ie

中实现相同的动画属性

http://tympanus.net/Development/ParallaxContentSlider/

/* Slide in from the right*/
.da-slide-fromright h2{
    animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
    animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
    animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
    animation: fromRightAnim4 0.6s ease-in 0.8s both;
}

/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

0 个答案:

没有答案