CSS3はシームレスなスクロールと手ぶれ防止を実現します

CSS3はシームレスなスクロールと手ぶれ防止を実現します

質問

画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモバイル ブラウザーでは画像がひどく揺れてしまいます。

間違った書き方

次のように left または margin-left を使用することはできません。

.donghua.active{
  アニメーション: スクロール、イーズインアウト、1 秒、無限、交互に;
  -webkit-animation: スクロールのease-in-out 1秒無限交互;
}
@keyframes スクロール {
  から {
    左: 0;
  }
  に {
    左: -353px;
  }
}
-webkit-@keyframes スクロール {
  から {
    左: 0;
  }
  に {
    左: -353px;
  }
}

回避策

モバイル フォンでは、要素がひどく揺れます。次のように 2D 変換を使用します。

.donghua.active{
  アニメーション: スクロール、イーズインアウト、1 秒、無限、交互に;
  -webkit-animation: スクロールのease-in-out 1秒無限交互;
}
@keyframes スクロール {
  0% {
    変換: translate(0px, 0px);
  }

  100% {
    変換: translate(0px, -353px);
  }
}
@-webkit-keyframes スクロール {
  0% {
    変換: translate(0px, 0px);
  }

  100% {
    変換: translate(0px, -353px);
  }
}

以上が、CSS3 を使ってシームレススクロールと手ぶれ防止を実現する方法の詳細です。CSS3 シームレススクロールと手ぶれ防止の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

<<:  FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

>>:  JavaScript オブジェクトからプリミティブ値への変換の詳細な説明

推薦する

MySQL パフォーマンスの包括的な最適化方法リファレンス、CPU、ファイルシステムの選択から mysql.cnf パラメータの最適化まで

この記事では、一般的な MySQL 最適化方法をいくつかまとめて簡単に紹介します。これは、フルタイム...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

事例を通してLinux NFSの仕組みを詳細に分析

前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...

Windows Server 2016 に Docker をインストールするプロセスと発生した問題

前提条件Windows Server でコンテナーを実行するには、Windows Server (半...

Alibaba Cloud サーバーの購入とインストール方法

1. サーバーを購入するこの例では、購入したサーバーはAlibaba Cloudです。大学生はAli...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

nginxでgzip圧縮を有効にする手順を完了する

目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorException の解決方法

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...

Ubuntu システムにおけるネットワーク構成ファイルの分析と説明

今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...

MySQL ストアドプロシージャとストアドファンクションの詳細な説明

1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...

React Routerの歴史について簡単に説明します

React Router を理解したいなら、まず歴史を理解する必要があります。より具体的には、Rea...

Linux seqコマンドの使い方の詳しい説明

01. コマンドの概要seq コマンドは整数のシーケンスを生成するために使用されます。 02. コマ...

PHP 開発環境の構築に関する win10 docker-toolsbox チュートリアル

画像をダウンロード docker プル mysql:5.7 docker pull php:7.2-...

MySQL の分離レベル、ロック、MVCC の紹介

この記事の目的は、これらの概念とその機能の関係を明らかにすることです。 Mysql がトランザクショ...