我的css代码适用于chrome和safari,但不适用于Firefox,IE和Opera.当我创建@keyframes rotate {}时,对于其他浏览器,这不适用于这4行:
animation-duration: 4s;
animation-timing-function: linear;
animation-name:"rotate";
animation-iteration-count: infinite;
或者对于keyframe方法?我怎样才能解决这个问题?
CSS:
@-webkit-keyframes rotate { 0% { -webkit-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); } 13% { -webkit-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); } 25% { -webkit-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); } 38% { -webkit-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); } 50% { -webkit-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); } 63% { -webkit-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); } 75% { -webkit-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); } 88% { -webkit-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); } 100% { -webkit-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); } } /************** F I R E F O X ***********************/ @-moz-keyframes rotate { 0% { -moz-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); } 13% { -moz-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); } 25% { -moz-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); } 38% { -moz-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); } 50% { -moz-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); } 63% { -moz-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); } 75% { -moz-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); } 88% { -moz-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); } 100% { -moz-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); } } /************************************/ @keyframes rotate { 0% { transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); } 13% { transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); } 25% { transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); } 38% { transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); } 50% { transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); } 63% { transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); } 75% { transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); } 88% { transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); } 100% { transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); } } /************** I E ***********************/ @-ms-keyframes rotate { 0% { -ms-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); } 13% { -ms-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); } 25% { -ms-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); } 38% { -ms-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); } 50% { -ms-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); } 63% { -ms-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); } 75% { -ms-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); } 88% { -ms-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); } 100% { -ms-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); } } /************************************/ @-o-keyframes rotate { 0% { -o-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); } 13% { -o-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); } 25% { -o-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); } 38% { -o-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); } 50% { -o-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); } 63% { -o-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); } 75% { -o-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); } 88% { -o-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); } 100% { -o-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); } } /*************************************/ #circle { height: 10px; width: 10px; border-radius:25px; background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-name:"rotate"; -webkit-animation-iteration-count: infinite; animation-duration: 4s; animation-timing-function: linear; animation-name:"rotate"; animation-iteration-count: infinite; -moz-animation-duration: 4s; -moz-animation-timing-function: linear; -moz-animation-name:"rotate"; -moz-animation-iteration-count: infinite; -ms-animation-duration: 4s; -ms-animation-timing-function: linear; -ms-animation-name:"rotate"; -ms-animation-iteration-count: infinite; -o-animation-duration: 4s; -o-animation-timing-function: linear; -o-animation-name:"rotate"; -o-animation-iteration-count: infinite; position:absolute; left:-1%; top:-1%; }
Andrea Ligio.. 7
从动画名称中删除双引号(rotate
而不是"rotate"
).
然后它会工作:
运行演示
-webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-name:rotate; -webkit-animation-iteration-count: infinite; -moz-animation-duration: 4s; -moz-animation-timing-function: linear; -moz-animation-name:rotate; -moz-animation-iteration-count: infinite; -ms-animation-duration: 4s; -ms-animation-timing-function: linear; -ms-animation-name:rotate; -ms-animation-iteration-count: infinite; -o-animation-duration: 4s; -o-animation-timing-function: linear; -o-animation-name:rotate; -o-animation-iteration-count: infinite; animation-duration: 4s; animation-timing-function: linear; animation-name:rotate; animation-iteration-count: infinite;
请记住,非前缀属性必须始终是特定于供应商之后的最后一个属性.
PS:如果您不知道,有些站点在编译时为您的代码添加前缀(如Prefixr),甚至在运行时(如无前缀).
顺便说一句+1,你的动画很漂亮:)
从动画名称中删除双引号(rotate
而不是"rotate"
).
然后它会工作:
运行演示
-webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-name:rotate; -webkit-animation-iteration-count: infinite; -moz-animation-duration: 4s; -moz-animation-timing-function: linear; -moz-animation-name:rotate; -moz-animation-iteration-count: infinite; -ms-animation-duration: 4s; -ms-animation-timing-function: linear; -ms-animation-name:rotate; -ms-animation-iteration-count: infinite; -o-animation-duration: 4s; -o-animation-timing-function: linear; -o-animation-name:rotate; -o-animation-iteration-count: infinite; animation-duration: 4s; animation-timing-function: linear; animation-name:rotate; animation-iteration-count: infinite;
请记住,非前缀属性必须始终是特定于供应商之后的最后一个属性.
PS:如果您不知道,有些站点在编译时为您的代码添加前缀(如Prefixr),甚至在运行时(如无前缀).
顺便说一句+1,你的动画很漂亮:)