2016.3.17CSS3 アニメーション 11 日目_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 アニメーション

CSS3 を使用すると、多くの Web ページのアニメーション画像、Flash アニメーション、JavaScript を置き換えることができるアニメーションを作成できます。

今日のレッスンのプレビュー

1. キーフレーム

CSS3 でアニメーションを作成するには、@keyframes ルールを学ぶ必要があります。

@keyframes ルールはアニメーションの作成に使用されます。

@keyframes で特定の CSS スタイルを指定して、現在のスタイルから新しいスタイルに徐々に変化するアニメーション効果を作成します。

以前にトランジションを使用して単純なトランジション効果を作成したとき、

初期属性と最終属性、開始アクション時間と継続アクション時間、およびアクションの変換率を含めました

実際、これらの値ははすべて 1 つの中間値ですが、より細かく制御したい場合は、

たとえば、最初の期間でどのようなアクションを実行したいか、2 番目の期間でどのようなアクションを実行したいかなどです。 ? (フラッシュに切り替えます。最初のフレームで実行したいことです。2 番目のフレームでどのようなアクションを実行する必要があります)、

これは、現時点ではトランジションを使用して実現することも困難です。制御するにはそのような「キーフレーム」が必要です。

次に、CSS3 でこの効果を実現するために「keyframes」属性が使用されます。まずキーフレームを見てみましょう:

キーフレームの構文規則、

@keyframes name1{    0%{属性名：属性值；属性名：属性值；}    29%{属性名：属性值；属性名：属性值；}    50%{属性名：属性值；属性名：属性值；}    100%{属性名：属性值；属性名：属性值；}}

ログイン後にコピー

構文規則を説明しましょう:

は @keyframes で始まり、その後にアニメーションの名前が続く必要があります。名前は自分で定義します。

の後に中括弧のペアを追加します。

変更する属性と属性値をセミコロンで区切って記述します。

さらに、from を使用して 0% を置き換えて初期状態を示し、to を使用して 100% を置き換えて終了状態を示すことができます。つまり、次のスタイルで記述されます:

@keyframes name1{    from{属性名：属性值；属性名：属性值；}    29%{属性名：属性值；属性名：属性值；}    50%{属性名：属性值；属性名：属性值；}    to{属性名：属性值；属性名：属性值；}}

ログイン後にコピー

2. ブラウザプレフィックス

キーフレームは w3c の標準属性になっていますが、互換性のために、

Google や Safari などのブラウザにカーネルプレフィックスを追加する必要があります。

一般的に属性を設定する場合は5種類を設定することが多いです。

-webkit-: カーネル (google chrome、safari、cheetah、360 スピードバージョン)

x5: QQ ブラウザ、WeChat

ms: Microsoft IE ブラウザ

-o-: Opera (ブラウザを開き、転送 Google 陣営に入る)

-moz-: Firefox (netscape)

3. アニメーション animate

@keyframes でアニメーションを作成する場合は、セレクターに関連付けてください。そうしないと、アニメーションは生成されません。

次の CSS3 アニメーションプロパティのうち少なくとも 2 つを指定することで、アニメーションをセレクターにバインドできます:

アニメーションの名前を指定します

アニメーションの継続時間を指定します

注: アニメーションの名前と継続時間を定義する必要がありますアニメーション。期間を省略した場合、デフォルト値は 0 であるため、アニメーションは許可されません。

プロパティ説明 @keyframesanimationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode

3.1 动画属性

动画名称 (animation-name)。名称是区别事物的一种最好的办法，像每个人都有自己的名字一样，我们的动画也有自己的名称，在上面学习keyframes时，我们提到了需要自己定义帧的名字，此处的名称就是刚才我们定义帧时候取的名字，是一个必不可少的属性。
动画执行时间 (animation-duration)。在keyframes阶段我们提到了百分比指的是动画执行时间的百分比，所以动画的持续时间也是一个必不可少的属性。单位是秒或者毫秒。
动画执行次数(animation-iteration-count)。动画的执行时间不可能是无限的，但是我们有时候需要这个动画一直执行下去，这时我们可以定义动画的执行次数为无限次，当然你也可以定义3次、4次、5、6、7、8等等次，当然定义多少次要看你的需要。
-webkit-animation-iteration-count: 10;（无限次为infinite）
动画变换速率（animation-timing-function)。实际上就是动画的播放方式，它和transition中的transition-timing-function一样，具有以下几种变换方式：ease , ease-in , ease-in-out , linear , cubic-bezier，cubic-bezier指的是贝塞尔曲线，稍后会讲这一部分的内容。
延迟（animation-delay）。一个页面中可能有许多的动画，有的时候我们想有的先播放，有的后播放，那么我们怎么实现这样的效果呢。animate里面引进了一个属性叫做延迟，它规定这个动画可以在延迟制定时间后再执行。单位是秒或者毫秒。
运动方向（animation-direction）。用来指定动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
动画的播放状态（animation-play-state）。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。这个属性很少有内核支持，所以只是稍微提一下就好。
动画时间之外的状态(animation-fill-mode)。我们日常经常使用的是：forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。除此之外还有三个值，分别是none：不改变默认行为。backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both：向前和向后填充模式都被应用。

3.2 样例代码

所有动画属性串联在一起的时候，属性的排列次数是

animation: 动画名称+动画执行时间+动画变换速率+延迟+动画执行次数+运动方向

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css"> .animate{ width: 100px; height: 100px; background: pink; animation: name1 4s linear 2s infinite alternate; -webkit-animation: name1 4s linear 2s infinite alternate; } @keyframes name1{ 0%{width: 100px;} 29%{width: 200px;} 50%{width: 50px;} 100%{width: 100px;} } </style>    </head>    <body>        <div class="animate"></div>    </body></html>

ログイン後にコピー

4. 第三方库 animate.css

如果每次写动画都要自己去写每一个运动的过程会是一件非常麻烦的事，

那么能不能有一个库存在，里面有非常非常多的动画，

每次我们想要用动画的时候只需要去这个库里面提取出来，这样的话就会非常方便，

也是出于这样的考虑，第三方库animate.css出现了，它里面封装了非常多的动画，

我们想要用的时候直接调用里面的动画就好了，接下来我们就来看动画的第三方库animate.css。

我们已经知道这是个包含了很多动画的库，

这里提供了链接，http://www.17sucai.com/pins/demoshow/9411，

我们可以里面看到不同的动画名称对应的不同效果，那么我们怎么使用这里面的动画呢，

它的使用方法非常简单，我们具体来看：

4.1 引入第三方库

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>第三方库</title>        <link rel="stylesheet" type="text/css" href="animate.min.css"/>    </head>    <body>    </body></html>

ログイン後にコピー

4.2 指定具体动画效果

方法一：

格式：animation：”name“ time；

例： animation：”flip” 2s;

表示这个名字叫做flip的动画执行时间是2s，可以看到这种方法和我们刚才学习的是一样的。

完整代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="animate.min.css">    <style type="text/css"> div{ height: 200px; width: 200px; background-color: #ccc; -webkit-animation: "flip" 2s; -o-animation: "flip" 2s; animation: "flip" 2s; } </style></head><body>    <div></div></body></html>

ログイン後にコピー

方法二：

格式：

例：

完整代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="animate.min.css">    <style type="text/css"> div{ height: 200px; width: 200px; background-color: #ccc; } </style></head><body>    <div class="flip animated"></div></body></html>

ログイン後にコピー

5. 贝塞尔曲线

我们学transition的时候，有一个属性叫做transition-timing-function，

这个属性规定了效果的速度曲线，里面有一些属性值，

匀速运动linear

速度逐渐变慢ease

先慢后快ease-in

先快后慢ease-out

先慢后快再慢ease-in-out

除此之外我们还有一个参数值叫做cubic-bezier，该值允许你去自定义一个时间曲线，这就是我们要讲的贝塞尔曲线。

贝塞尔曲线（The Bézier Curves），是一种在计算机图形学中相当重要的参数曲线（2D，3D的称为曲面）。

贝塞尔曲线于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表，他运用贝塞尔曲线来为汽车的主体进行设计。

我们在日常开发中最常用的就是二次曲线。

偶尔会使用到三次曲线。

当然更高深的也有，但是咱们不会涉及到。

咱们在日常开发中只需要会确定锚点和控制点的位置就好。

更多的尝试可以参考这个网站，我们不需要大家会精确定位每一个点，

只需要大家能够大概猜出这个点具体在哪个位置就可以啦。

http://cubic-bezier.com/#0,0,.58,1

代码实现：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css"> .animate{ width: 200px; height: 200px; background: pink; transition: width 3s cubic-bezier(1,.02,.31,.9); -webkit-transition: width 3s cubic-bezier(1,.02,.31,.9); } .animate:hover{ width: 1000px; } </style>    </head>    <body>        <div class="animate"></div>    </body></html>

ログイン後にコピー

アニメーションを指定します。
anime-play-state プロパティを除く、すべてのアニメーションプロパティの短縮形プロパティ。
@keyframes アニメーションの名前を指定します。
アニメーションが 1 サイクル完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。
アニメーションのスピードカーブを指定します。デフォルトは「簡単」です。
アニメーションの開始時期を指定します。デフォルトは 0 です。
アニメーションの再生回数を指定します。デフォルトは 1 です。
次のサイクルでアニメーションを逆方向に再生するかどうかを指定します。デフォルトは「通常」です。
アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。
アニメーション時間外のオブジェクトの状態を指定します。