アニメーション効果を実現するCSS3

今日は、css3を使用して、要素が左右に揺れる効果を実現したいと思います。まず、css3のアニメーションプロパティの説明を見てください。

CSS3 @keyframesルール
CSS3でアニメーションを作成するには、@ keyframesルールを学習する必要があります。
@keyframesルールは、アニメーションの作成に使用されます。@keyframesで特定のCSSスタイルを指定することにより、現在のスタイルから新しいスタイルに徐々に変化するアニメーション効果を作成できます。
Internet Explorer 10、Firefox、およびOperaは、@ keyframesルールとアニメーション属性をサポートしています。
ChromeとSafariには、プレフィックス-webkit- @keyframesが必要です。
インスタンス

	@keyframes myfirst
	{
		from {background: red;}
		to {background: yellow;}
	}
	@-webkit-keyframes myfirst /* Safari 和 Chrome */
	{
		from {background: red;}
		to {background: yellow;}
	}

アニメーションは、要素をあるスタイルから別のスタイルに徐々に変更する効果です。
スタイルは何度でも変更できます。
パーセンテージを使用して変更が発生する時間を指定するか、0％と100％に相当するキーワード「from」と「to」を使用してください。
0％はアニメーションの開始であり、100％はアニメーションの完了です。
最高のブラウザサポートを得るには、常に0％と100％のセレクターを定義する必要があります。
例
アニメーションが25％と50％のときに背景色を変更し、アニメーションが100％完了したらもう一度背景色を変更します。

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}![在这里插入图片描述](https://img-blog.csdnimg.cn/20190809105211511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE5MzAwNTQ=,size_16,color_FFFFFF,t_70)

CSS3アニメーションプロパティの
例

すべてのアニメーションプロパティを設定して、myfirstという名前のアニメーションを実行します。

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

上記は、アニメーションの標準プロパティに従って構成されており、省略形で記述することもできます。

この例
は上記のアニメーションと同じですが、省略形のアニメーションプロパティを使用しています。

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

以下のメイントピックに入りましょう。要素を左右に振る方法について話します。
最初に@keyframesと要素のアニメーションプロパティを設定します。

<style>
        .weui-badge{
            display:inline-block;
            padding:.15em .4em;
            min-width:8px;
            border-radius:18px;
            background-color:#F43530;
            color:#FFFFFF;
            line-height:1.2;
            text-align:center;
            font-size:12px;
            vertical-align:middle;
            animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
            transform-origin:bottom;-webkit-transform-origin:bottom;
        }
        @keyframes move
        {
            0%, 65%{
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
            70% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            75% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            80% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            85% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            90% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            95% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            100% {
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
        }

        @-webkit-keyframes move
        {
            0%, 65%{
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
            70% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            75% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            80% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            85% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            90% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            95% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            100% {
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
        }
    </style>

コードの分析を見ることができます。@keyframesルールを設定すると、要素は0％〜65％でアクションを実行しません。つまり、回転角は70％〜100％で開始し
、6度でスイングします。アニメーションをweui-badgeのように設定します。次のようなスタイル：

animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;
-webkit-transform-origin:bottom;

つまり、@ keyframesルールを使用して、サイクルアクションを完了するようにアニメーションを3秒に設定し、アニメーションを0秒から開始するように設定し、アニメーションを無限に（無限に）再生するように指定します。
transform-origin：bottomを設定して、要素の回転の基点を下部の中心点として設定します。デフォルト値は、要素の中心点です。

アニメーション効果を実現するCSS3

おすすめ