我有一个摇摆动画,我想在所有(现代)浏览器上工作.我有正确的CSS吗?
此外,其他浏览器相当于:-webkit-transform-origin:top;
还有,有没有更简单的方法来写出来,似乎很多代码?我少用.
.bow{ -webkit-animation: swing 3s infinite ease-in-out; -moz-animation: swing 3s infinite ease-in-out; -o-animation: swing 3s infinite ease-in-out; -ms-transition: swing 3s infinite ease-in-out; animation: swing 3s infinite ease-in-out; } @-webkit-keyframes swing{ 0%{-webkit-transform:rotate(-3deg)} 50%{-webkit-transform:rotate(3deg)} 100%{-webkit-transform:rotate(-3deg)} } @-moz-keyframes swing{ 0%{-moz-transform:rotate(-3deg)} 50%{-moz-transform:rotate(3deg)} 100%{-moz-transform:rotate(-3deg)} } @-o-keyframes swing { 0%{-o-transform:rotate(-3deg)} 50%{-o-transform:rotate(3deg)} 100%{-o-transform:rotate(-3deg)} } @-ms-keyframes swing { 0%{-ms-transform:rotate(-3deg)} 50%{-ms-transform:rotate(3deg)} 100%{-ms-transform:rotate(-3deg)} } @keyframes swing { 0%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} 100%{transform:rotate(-3deg)} }
Slawa Eremki.. 6
动画使用可以使用:
.animation(@value){ -webkit-animation: @value; -moz-animation: @value; -o-animation: @value; -ms-transition: @value; animation: @value; } .test{ .animation(swing 3s infinite ease-in-out); } .test1{ .animation(~"swing 3s infinite, swing 3s infinite"); }
对于Less中的关键帧,有点奇怪: 如何在LESS中设置关键帧名称