コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

css3 アニメーション ジッター効果_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:49:04
オリジナル
1936 人が閲覧しました

html结构：










< ;/div>




css样式：

.dd {

アニメーション: 1秒振る;
-o-アニメーション: 1 秒間シェイクします。
-webkit-animation: 1 秒間シェイクします。
-moz-animation: 1 秒間シェイクします。
}
@keyframes シェイク {
0%, 100% {
-webkit-transform: translationX(0);
}
10%、
30%、
50%、
70%、
90% {
-webkit-transform: translationX(-5px);
}
20%、
40%、
60%、
80% {
-webkit-transform: translationX(5px);
}
}
@-o-keyframes shade {
/* Opera */
0%, 100% {
-webkit-transform: translationX(0);
}
10%、
30%、
50%、
70%、
90% {
-webkit-transform: translationX(-5px);
}
20%、
40%、
60%、
80% {
-webkit-transform: translationX(5px);
}
}
@-webkit-keyframes shake {
/* Safari および Chrome */
0%, 100% {
-webkit-transform: translationX(0);
}
10%、
30%、
50%、
70%、
90% {
-webkit-transform: translationX(-5px);
}
20%、
40%、
60%、
80% {
-webkit-transform: translationX(5px);
}
}
@-moz-keyframes shake {
/* Firefox */
0%, 100% {
-moz-transform: translationX(0);
}
10%、
30%、
50%、
70%、
90% {
-moz-transform: translationX(-5px);
}
20%,
40%,
60%,
80% {
-moz-transform: translationX(5px);
}

}


js效果：



効果：


ネズミ标家に帰る图标時、图标会左右晃動。
関連ラベル：
css3动画 抖动效果
ソース：php.cn
前の記事：html+cssはWindowsデスクトップ_html/css_WEB-ITnoseを実装します 次の記事：CSS jqueryは、Divの下部が固定されており、スクロールバーと一緒に移動しないことを認識します_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
クリックしたときにテキストが新しい要素 (区切り線など) に変わるようにするにはどうすればよいですか? ページ上の特定のテキストをクリックすると区切り文字/新しい要素に変わる方法を見つけようとしています。どう説明したらいいのかわかりませんが、画像の下にタイトルがあると想像してください...
から 2024-04-04 11:21:03
0
1
3580
Vanilla JS setTimeout(): 間違った動作の特定 ハンバーガー メニューのアニメーションを HTML、CSS、およびバニラ JavaScript で作成しました。期待される結果 ハンバーガー メニュー ボタンをクリックすると、次の...
から 2024-04-02 20:44:40
0
1
284
CSS テキスト アニメーションが読み込み時に過度にジッターする原因は何ですか? あらゆるトリックを試しましたが、アニメーションは依然として非常に途切れ途切れです。キーフレームの代わりにトランジションを使用することが推奨されている別の質問でいくつかのアドバイスに...
から 2024-04-01 23:54:24
0
1
322
TypeError: ThreeJs を使用して未定義のプロパティを読み取ることができません (「位置」を読み取ります) Web サイトのヒーロー セクションの背景に 3D モデルを統合しようとしています。これは機能しますが、ウィンドウ サイズを手動で変更すると、3D モデルが新しいサイズに適応しない...
から 2024-04-01 12:01:52
0
1
416
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート