018-CSS3动画

一、CSS3 动画介绍

CSS3动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器

二、CSS3 动画

（一）、CSS3@keyframes

定义

创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器

@keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

当**@keyframes** 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称 animation-name

规定动画的时长 animation-duration

@keyframes 语法

• 语法：@keyframes animationname {keyframes-selector {css-styles;}}

• 参数

  • animationname {string}：必需。定义动画的名称。
  • {keyframes-selector}：必需。动画时长的百分比。合法的值有
    • 0-100%
    • from（与 0% 相同）
    • to（与 100% 相同）
  • {css-styles}：必需。一个或多个合法的 CSS 样式属性

• 实例

  @keyframes move {
    0% {
      top: 0px;
    }
    100% {
      top: 100px;
    }
  }
  

（二）、animation

• 语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state

• 参数

  • animation-name：规定需要绑定到选择器的 keyframe 名称
  • animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
  • animation-timing-function：规定动画的速度曲线。
  • animation-delay：规定在动画开始之前的延迟。
  • animation-iteration-count：规定动画应该播放的次数。
  • animation-direction：规定是否应该轮流反向播放动画。

（三）、animation-name

animation-name：规定@keyframes动画的名称

• 语法：animation-name: name

• 参数

  • name {string}：指定@keyframes动画的名称

• 实例

  div {
    animation-name: mymove;
  }
  

（四）、animation-duration

animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是0

• 语法：animation-duration: time

• 参数

  • time {number}：规定完成动画所花费的时间，以秒或毫秒计。默认为0，意味着没有动画效果

• 实例

  div {
    animation-duration: 0.5s;
  }
  

（五）、animation-timing-function

animation-timing-function：规定动画的速度曲线，默认是ease

• 语法：animation-timing-function: value

• 参数

  • linear：动画从头到尾的速度是相同的。
  • ease：默认。动画以低速开始，然后加快，在结束前变慢
  • ease-in：动画以低速开始
  • ease-out：动画以低速结束
  • ease-in-out：动画以低速开始和结束
  • cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

• 实例

  div {
    animation-timing-function: linear
  }
  

（六）、animation-delay

animation-delay：规定动画何时开始。默认是 0

• 语法：animation-delay: time;

• 参数

  • {time}：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0

• 实例

  div {
    animation-delay: 2s
  }
  

（七）、animation-iteration-count

animation-iteration-count：规定动画被播放的次数。默认是 1

• 语法：animation-iteration-count: n|infinite;

• 参数

  • n {number}：定义动画播放次数的数值
  • infinite：规定动画应该无限次播放

• 实例

  div {
    animation-iteration-count: infinite;
  }
  

（八）、animation-direction

animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”

• 语法：animation-direction: normal|alternate

• 参数

  • normal：默认值。动画应该正常播放
  • alternate：动画应该轮流反向播放

• 实例

  div {
    animation-direction: alternate;
  }
  

（九）、animation-play-state

animation-play-state：规定动画是否在下一周期逆向地播放。默认是 “normal”
您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画

• 语法：animation-play-state: paused|running

• 参数

  • paused：规定动画已暂停
  • running：规定动画正在播放

• 实例

  div {
    animation-play-state: paused;
  }
  

（十）、animation-fill-mode

animation-fill-mode：属性规定动画在播放之前或之后，其动画效果是否可见

• 语法：animation-fill-mode : none | forwards | backwards | both;

• 参数

  • none：不改变默认行为
  • forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
  • backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
  • both：向前和向后填充模式都被应用

• 实例

  div {
    animation-fill-mode: both;
  }
  

三、CSS3 动画库

（一）、animate.css

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果

• 下载地址

  • 官方网站：https://daneden.github.io/animate.css/
  • cdn地址：https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css

• 实例
  

（二）、wow.js

介绍

在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感
WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求

cdn地址：https://cdn.bootcss.com/wow/1.1.2/wow.min.js

引用

<!-- 引用 --> 
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.js"></script>

<!-- html模块 --> 
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

<!-- 初始化 --> 
<script>
  new WOW().init();
</script>

wow配置

var wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true
});
wow.init();

• 参数

  • boxClass {string}：wow需要执行动画的元素的class。默认值为wow
  • animateClass {string}：animation.css动画的class。默认值为animated
  • offset {numebr}：距离可视区域多少开始执行动画。默认值为0
  • mobile {boolean}：是否在移动设备执行动画。默认值为true
  • live {boolean}：异步加载的内容是否有效。默认值为true

• 自定义属性

  • data-wow-duration {time}：动画持续时间
  • data-wow-delay {time}：动画延迟时间
  • data-wow-offset {number}：元素的位置露出后距离底部多少像素执行
  • data-wow-iteration {number}：动画执行次数

实例

<h1 class="wow bounce" data-wow-delay=".1s">人才需求大，薪资高，晋升快</h1>

var wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 100
});
wow.init();

四、课后作业

• 熟悉css3动画，制作简单的案例
• 了解CSS3动画库，并使用其运用在项目上