简体   繁体   English

摇和旋转div与css3

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM