我想让一个 div 有点模糊添加这个 css 类
.fuzz{
margin-left: 0px;
animation:fuzz 0.1s linear 0s infinite ;
-moz-animation: fuzz 0.1s linear 0s infinite ; /* Firefox */
-webkit-animation: fuzz 0.1s linear 0s infinite ; /* Safari and Chrome */
-o-animation: fuzz 0.1s linear 0s infinite ; /* Opera */
}
@keyframes fuzz
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
@-moz-keyframes fuzz /* Firefox */
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
@-webkit-keyframes fuzz /* Safari and Chrome */
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
@-o-keyframes fuzz /* Opera */
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
但它只会左右晃动......为什么transform: rotate(5deg)
不起作用?我能怎么做?