问题描述:

I was just trying in css3 if percentage(%) works in translateY or translateX. But Except opera all the browsers are doing correct animation. But opera doing no animation. Why?

Here is my code.

.ribbon {

position:fixed;

right:0px;

top:0px;

z-index:-90;

-webkit-animation: moveY 10s ease 0s infinite normal;

-moz-animation: moveY 10s ease 0s infinite normal;

-ms-animation: moveY 10s ease 0s infinite normal;

-o-animation: moveY 10s ease 0s infinite normal;

animation: moveY 10s ease 0s infinite normal;

}

@-webkit-keyframes moveY {

0%{ -webkit-transform:translateY(-100%); }

50%{ -webkit-transform:translateY(0px); }

60%{ -webkit-transform:translateY(0px); }

100%{ -webkit-transform:translateY(100%); }

}

@-moz-keyframes moveY {

0%{ -moz-transform:translateY(-100%); }

50%{ -moz-transform:translateY(0px); }

60%{ -moz-transform:translateY(0px); }

100%{ -moz-transform:translateY(100%); }

}

@-ms-keyframes moveY {

0%{ -ms-transform:translateY(-100%); }

50%{ -ms-transform:translateY(0px); }

60%{ -ms-transform:translateY(0px); }

100%{ -ms-transform:translateY(100%); }

}

@-o-keyframes moveY {

0%{ -o-transform:translateY(-100%); }

50%{ -o-transform:translateY(0px); }

60%{ -o-transform:translateY(0px); }

100%{ -o-transform:translateY(100%); }

}

@-keyframes moveY {

0%{ transform:translateY(-100%); }

50%{ transform:translateY(0px); }

60%{ transform:translateY(0px); }

100%{ transform:translateY(100%); }

}

相关阅读:
Top