今天用less写动画,然后写到兼容,可让我想了会儿
less变量如下
.mixin(@attr,@val) { @{attr}: @val; -webkit-@{attr}: @val; -moz-@{attr}: @val; -o-@{attr}: @val; -ms-@{attr}: @val; } .keyframes (@name, @frames) { @-webkit-keyframes @name { @frames(); } @-moz-keyframes @name { @frames(); } @-ms-keyframes @name { @frames();} @-o-keyframes @name { @frames(); } @keyframes @name { @frames(); } }
上面的名字可以随便起
如何使用?
如下
.slowWalk { .mixin(animation-name,person-slow); .mixin(animation-duration,950ms); .mixin(animation-iteration-count,infinite); .mixin(animation-timing-function,steps(1, start)); } .keyframes (person-slow, { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } });
解析后
.slowWalk { animation-name: person-slow; -webkit-animation-name: person-slow; -moz-animation-name: person-slow; -o-animation-name: person-slow; -ms-animation-name: person-slow; animation-duration: 950ms; -webkit-animation-duration: 950ms; -moz-animation-duration: 950ms; -o-animation-duration: 950ms; -ms-animation-duration: 950ms; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-timing-function: steps(1, start); -webkit-animation-timing-function: steps(1, start); -moz-animation-timing-function: steps(1, start); -o-animation-timing-function: steps(1, start); -ms-animation-timing-function: steps(1, start); } @-webkit-keyframes person-slow { 0% { background-position: 0px -291px; } 25% { background-position: -602px 0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: 0px -291px; } } @-moz-keyframes person-slow { 0% { background-position: 0px -291px; } 25% { background-position: -602px 0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: 0px -291px; } } @-ms-keyframes person-slow { 0% { background-position: 0px -291px; } 25% { background-position: -602px 0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: 0px -291px; } } @-o-keyframes person-slow { 0% { background-position: 0px -291px; } 25% { background-position: -602px 0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: 0px -291px; } } @keyframes person-slow { 0% { background-position: 0px -291px; } 25% { background-position: -602px 0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: 0px -291px; } }