css动画实践

动画实践

animation

其属性有一下几种：

• animation-delay

  设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

• animation-direction

  设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

• animation-duration

  设置动画一个周期的时长。

• animation-iteration-count

  设置动画重复次数，可以指定 infinite 无限次重复动画。一般常用. Infinite. 表示无限循环

• animation-name

  指定由@keyframes描述的关键帧名称。

• animation-play-state

  允许暂停和恢复动画。

• animation-timing-function

  设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。 也就是定义动画播放的节奏。linear: 代表 均匀播放。

• animation-fill-mode

  指定动画执行前后如何为目标元素应用样式。

一般来说 可以直接把所有属性写在一行中：

比如:

animation: animation-name animation-duration animation-iteration-count

animation: colorCh 0.2s infinite;

然后通过 @keyframes 配置关键帧 展示效果。

因为动画的时间设置是通过 CSS 样式定义的，关键帧使用 percentage 来指定动画发生的时间点。0% 表示动画的第一时刻，100% 表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from 和 to。这两个都是可选的，若 from/0% 或 to/100% 未指定，则浏览器使用计算值开始或结束动画。

也可包含额外可选的关键帧，描述动画开始和结束之间的状态。 这个的话 可以用 from{ }. to { } 来进行关键帧的描述，当然实际上 from也就是0%。 to 是100%

有些属性值得 注意的是。

`opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度``

/* 完全不透明 */
opacity: 1;
opacity: 1.0;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0.0;
opacity: 0;

opacity: inherit;

```translateY()` 在页面垂直移动元素，结果是 CSS 数据类型 ``。

/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);