CSS ジッターの基本_html/css_WEB-ITnose

ドキュメント
<スタイル>
@-webkit-keyframes バズアウト{
0%{
-webkit-transform:translateX(10px)rotate(20deg);
}
30%{
-webkit-transform:tranalateX(-10px)rotate(-20deg);


}
60%{
-webkit-transform:translateX(30px)rotate(50deg);
}
100%{
-webkit-transform:translateX(-30px)rotate(-50deg);
}
}
#buzz{
width:1000px;
高さ:400px;
margin:200px;
背景:#eee1e1;
位置:相対;
}
#buzz:hover {
-webkit-animation-name:buzz-out;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:100;
}

 

以上です。しばらく秒または秒秒记

animation-timing-fuction:定義アニメーション画速度曲線

animation-delay:定義開始前までの延伸

animation-iteration-count:定義アニメーション画应播放次数

animation-direction:定義か否か轮流反向播放アニメーション

@-webkit-keyframesuzz-out{

0%{

-webkit-transform:translateX(10px)rotate(20deg);

}

30%{

-webkit-transform:tranalateX(-10px)回転(-20度);

}
60%{
-webkit-transform:translateX(30px)rotate(50deg);
}
100%{
-webkit-transform:translateX(-30px)rotate(-50deg) );
}
}


这里可以设置抖動的広さ