[英]shake and rotate div with css3
I want to make a div a little fuzzy adding this css class 我想让一个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);}
}
but it only shake left and right... Why transform: rotate(5deg)
doesn't work? 但是它只能左右晃动...为什么要
transform: rotate(5deg)
不起作用? How can i do? 我能怎么做?
best practice and performance 最佳实践和表现
Demo: http://jsfiddle.net/4X6Dt/3/ 演示: http : //jsfiddle.net/4X6Dt/3/
.fuzz{
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 */
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
@keyframes fuzz
{
0% {transform: rotate(5deg) translate3d( 0px,0,0);}
25% {transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {transform: rotate(0deg) translate3d( 0px,0,0);}
75% {transform: rotate(5deg) translate3d( 5px,0,0);}
100% {transform: rotate(0deg) translate3d( 0px,0,0);}
}
@-moz-keyframes fuzz /* Firefox */
{
0% {-moz-transform: rotate(5deg) translate3d( 0px,0,0);}
25% {-moz-transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {-moz-transform: rotate(0deg) translate3d( 0px,0,0);}
75% {-moz-transform: rotate(5deg) translate3d( 5px,0,0);}
100% {-moz-transform: rotate(0deg) translate3d( 0px,0,0);}
}
@-webkit-keyframes fuzz /* Safari and Chrome */
{
0% {-webkit-transform: rotate(5deg) translate3d( 0px,0,0);}
25% {-webkit-transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {-webkit-transform: rotate(0deg) translate3d( 0px,0,0);}
75% {-webkit-transform: rotate(5deg) translate3d( 5px,0,0);}
100% {-webkit-transform: rotate(0deg) translate3d( 0px,0,0);}
}
@-o-keyframes fuzz /* Opera */
{
0% {-o-transform: rotate(5deg) translate3d( 0px,0,0);}
25% {-o-transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {-o-transform: rotate(0deg) translate3d( 0px,0,0);}
75% {-o-transform: rotate(5deg) translate3d( 5px,0,0);}
100% {-o-transform: rotate(0deg) translate3d( 0px,0,0);}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.