css3での変形とアニメーション (3)_html/css_WEB-ITnose

transform は行列変換を実現でき、transition は属性の滑らかな遷移を実現できます。アニメーションはアニメーション、アニメーションを意味します。この属性は実際のフレームごとのアニメーションに関連しています。この記事ではアニメーション属性について紹介します。

アニメーション属性は、一部のキーフレームの要素属性を変更することでアニメーション効果を実現します。もちろん、アニメーションの継続時間やアニメーションの反復数などを制御することもできます。

1. 例

トランジションを導入する際、マウスを置くと div の幅が 100px から 200px まで徐々に増加する例が最初にあります。

トランジションを使用した実装方法は次のとおりです

div:hover{    width: 200px;    transition:width 5s ease-in;}

次のように、アニメーションを使用しても同様の効果を実現できます:

<style type="text/css">div {    width: 100px;    height: 100px;    background-color: red;}@keyframes enlarge {    0% {        width: 100px;    }    50% {        width: 150px;    }    100% {        width: 200px;    }}div:hover {    /*width: 200px;    */       /*transition:width 5s ease-in;*/    animation: 5s enlarge;}}</style><div></div>

マウスはホバリングしており、アニメーションは 5 秒続き、div の幅は次のようになります。ハーフタイム、5 秒で 100px から 150px に増加します。div 幅が 200px に達すると、アニメーションが終了します。

ただし、トランジション効果とアニメーション効果の間にはまだ違いがあります。マウスを上に移動すると、トランジション アニメーションが実行された後、幅は 200 ピクセルのままになります。アニメーション アニメーションが実行されると、幅は 100 ピクセルに戻ります。

もちろん、これは単なるデフォルトの効果であり、アニメーションが完了したときの効果を変更することもできます。

上記のコードのアニメーションを

animation: 5s enlarge forwards;

に変更して、実行後の最後のフレームでアニメーションを停止します。これは、animation-fill-mode の値です。これについては後で詳しく説明します。

この例を通して、トランジションはアニメーションの簡略化されたバージョンとして理解できることを言いたいだけです。アニメーションはより多くの制御を提供し、より強力です。正式に紹介は以下から始まります。

2. キーフレーム

キーフレームとは「キーフレーム」を意味し、要素の属性の計算値を変更します。

キーフレーム構文:

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';keyframes-blocks: [ keyframe-selectors block ]* ;keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

総合的な記述:

 @keyframes IDENT {     from {       Properties:Properties value;     }     Percentage {       Properties:Properties value;     }     to {       Properties:Properties value;     }   }   或者全部写成百分比的形式：   @keyframes IDENT {      0% {         Properties:Properties value;      }      Percentage {         Properties:Properties value;      }      100% {         Properties:Properties value;      }    }

キーフレームは次のように記述されていることがわかります: 「@keyframes」で始まり、その後に「アニメーションの名前」と中括弧のペアが続きます「{} 」括弧内はさまざまな期間のスタイル ルールであり、ルールは CSS スタイルと同じ方法で記述されます。

「@keyframes」のスタイルルールは、「0%」から「100%」までの複数のパーセンテージで構成されており、1 つのルールで複数のパーセンテージを作成でき、アニメーション要素ごとに必要なパーセンテージが指定されます。さまざまな属性を追加して、要素の色、位置、サイズ、形状などの移動、変更など、要素が絶えず変化する効果を実現できるようにします。

2 つのキーワード、「from」と「to」はアニメーションの開始位置と終了位置を示します。つまり、「from」は「0%」に相当し、「to」は「100%」に相当します。

注: 0% の % は省略できません。省略した場合、キーフレームの単位はパーセンテージ値のみを受け入れるため、キーフレーム全体に構文エラーが発生し、ルール全体が無効になります。

例: W3C 公式 Web サイトからの例 このコードは、以下のアニメーションを紹介するときに使用されます。

 @-webkit-keyframes 'wobble' {     0% {        margin-left: 100px;        background: green;     }     40% {        margin-left: 150px;        background: orange;     }     60% {        margin-left: 75px;        background: blue;     }     100% {        margin-left: 100px;        background: red;     }  }

keyframes は各フレームのアニメーションを定義しますが、キーフレームを書くだけでは役に立たず、有効にするには呼び出す必要があります。したがって、それをどのように呼び出すかはアニメーションによって異なります。

3. アニメーション

アニメーションイベントがトリガーされない場合、ページが読み込まれた後、要素の CSS スタイルが時間の経過とともに明示的に変更され、アニメーション効果が生成されます。

要素はアニメーションとキーフレームをどのように呼び出しますか?

例: 上で書いたぐらつきアニメーションを呼び出します。

すごい

この時点で、トランジションを以前に見たことがあれば、アニメーションも複合属性であることが理解できたはずです。

animation には次の属性が含まれます: animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state およびアニメーション- フィルモード。以下では、太字の属性を理解することに重点を置き、それらを 1 つずつ紹介します。

1. アニメーション名

アニメーション名は最も重要で、どのフレーム アニメーションが適用されるかを示します。

構文:

 .demo1 {     width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: 10s;/*动画持续时间*/     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/     -webkit-animation-delay: 2s;/*动画延迟时间*/     -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/     -webkit-animation-direction: alternate;/*定义动画方式*/  }

デフォルト値: none、つまり、デフォルトではアニメーション効果はありません。

anime-name 属性は、@keyframes で定義されたアニメーションを呼び出します。これは、「@keyframes」で定義されたアニメーション名

とまったく同じである必要があります (大文字と小文字は区別されます)。 例: アニメーションでは、行列変換で変換を使用して、興味深い小さなアニメーションを作成します。

animation-name: none | IDENT[,none | IDENT]*;

2、animation-duration

構文:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>变形与动画</title><style type="text/css">@keyframes around{  0% {    transform: translateX(0);  }  25%{    transform: translateX(180px);  }  50%{     transform: translate(180px, 180px);   }  75%{    transform:translate(0,180px);  }  100%{    transform: translateY(0);  }}div {  width: 200px;  height: 200px;  border: 1px solid red;  margin: 20px auto;}div span {  display: inline-block;  width: 20px;  height: 20px;  background: orange;  border-radius: 100%;  animation-name:around;  animation-duration: 10s;  animation-timing-function: ease;  animation-delay: 1s;  animation-iteration-count:infinite;}</style></head><body>    <div>        <span></span>    </div></body></html>

デフォルト値は 0 で、これはアニメーションの継続時間が 0 であることを意味します。つまり、アニメーション効果はありません (値が負の場合は 0 とみなされます)。

animation-duration は、アニメーションの再生時間を定義します。これは、

アニメーションが 0% から 100% まで完了するのに必要な時間です

。単位 s. 3. anime-timing-function

構文:

animation-duration: <time>[,<time>]*

animation-timing-function 属性は、アニメーションの再生方法を設定するために使用されます。詳細については、CSS3の変形とアニメーション(2)の紹介を参照してください。

4. アニメーション遅延

文法:

animation-delay:<time>[,<time>]*

animation-delay定义事件触发到动画开始执行的时间，即延时。

5、animation-iteration-count

语法：

animation-iteration-count: infinite | <number> [, infinite | <number>]*

animation-iteration-count属性用来定义动画的播放次数。

默认值为1，即动画从开始到结束只播放一次。

值为infinite，动画将会无限次播放。

6、animation-direction

语法：

animation-direction:normal | alternate [, normal | alternate]*

animation-direction设置动画播放方向。

属性：

normal:默认值，如果值为normal时，动画每次循环都是向前播放。

alternate：奇数次播放动画是按顺序播放各帧动画，偶数次播放动画是按逆序播放各帧动画。

这个alternate还是很有用的，我写了一个例子，可以感受一下alternate效果。

例子：div尺寸由小到大，然后由大到小。

<style type="text/css"> @-webkit-keyframes 'testAnimationDirection' {     0% {        width: 50px;     }     20% {        width: 100px;     }     40% {        width: 150px;     }     60% {        width: 200px;     }     80% {        width: 250px;     }     100% {        width: 300px;     }  }    div{     width: 50px;     height: 50px;     border:1px solid red;     -webkit-animation-name:'testAnimationDirection';     -webkit-animation-duration: 10s;     -webkit-animation-timing-function: ease-in-out;      -webkit-animation-delay: 0s;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: alternate;     -webkit-animation-fill-mode:backwards;  }</style><div></div>

7、animation-play-state

animation-play-state用来控制元素动画的播放状态。

参数：

running:running是其默认值，作用是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放。

Note:

这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。

如果暂停了动画的播放，元素的样式将回到最原始设置状态。

paused:暂停播放。

这个很有用，让动画在鼠标悬停时暂停，离开时继续播放。

例子：还是上面的例子，加下面代码即可。

  div:hover{      animation-play-state:paused;  }

8、animation-fill-mode

animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用的样式。

有四个属性值：

none：默认值，动画执行前后不改变元素的任何样式。就是说动画在第一个关键帧播放之前不影响元素，最后一个关键帧播放完后停止影响元素。

forwards:动画完成后呆在最后一帧，就是保持结束时的状态。这里的最后一帧取决于animation-direction和animation-iteration-count：

backwards:在animation-delay期间应用第一帧。保持animation-delay，第一帧取法如下：

both:根据animation-direction轮流应用forwards和backwards规则。

Note:forwards和backwards关键字都是有s的。

backwards和none的区别

还是上面的例子，只是增加了animation-fill-mode属性。

<style type="text/css"> @-webkit-keyframes 'wobble' {     0% {        margin-left: 100px;        background: green;     }     40% {        margin-left: 150px;        background: orange;     }     60% {        margin-left: 75px;        background: blue;     }     100% {        margin-left: 100px;        background: red;     }  }    div{   width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'wobble';     -webkit-animation-duration: 10s;     -webkit-animation-timing-function: ease-in-out;      -webkit-animation-delay: 10s;     -webkit-animation-iteration-count: 10;     -webkit-animation-direction: alternate;    /* -webkit-animation-fill-mode:none; /*动画开始为蓝色*/     -webkit-animation-fill-mode:backwards; /*动画开始为绿色*/  }</style><div></div>

animation-fill-mode为none，则动画开始延时期间div为蓝色，backwards则动画开始延时期间div为绿色。

四、相关资源

看网上资料说做动画，尽量使用绝对定位，从而避免重绘重排问题：

动画十四原则: http://www.sunnyzhen.com/course/animation_principles/demo.html

动画十二原则：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

css3 animation动画库，有很多基础动画

http://daneden.github.io/animate.css/

hover animation动画

http://leaverou.github.io/animatable/

css3 animation在线调节工具：

http://melonh.com/animationGenerator/     基于chrome的插件，可以快速调节页面上的动画

http://isux.tencent.com/css3/tools.html      腾讯isux一款非常强大的动画工具

http://tid.tenpay.com/labs/css3_keyframes_calculator.html    财付通的帧动画调节工具

参考资源链接：

css3 animation动画技巧

跳动心脏

w3c css3-animations

MDN animation-fill-mode

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。