【前端学习笔记 11-CSS动画简介

css动画

CSS 动画是指使⽤ CSS 将元素从⼀种样式逐渐转变为另⼀种样式的效果 CSS
动画常⽤的三个属性分别是：transform，animation，transition

变换 Transform

• 概念：Transform 属性允许你旋转，缩放，倾斜
  或平移给定元素
• 基本用法: ⼀ 个 C S S 样式分为属性和属性值两部分，transform 为属性，不同的属性值可以实现不同的效果

.logo {
      transform: translate(100px, 100px) rotate(30deg);
    }

Translate - 2D 转换

• Translate 属性值可以使得元素进⾏⽔平或者垂直移动
• 例如：以下代码表示将 logo 元素⽔平向右平移 100px，垂直
  向下平移 100px

.logo {
      transform: translate(100px, 100px) ;
    }

• 如希望设置水平向左或垂直向上时，将px值设为对应的负值即可
• 若希望分别控制水平和垂直方向上的移动，则使用以下代码分开控制

transform: translateX();transform: translateY();

Scale - 缩放

• 概念：Scale 可以⽤来放⼤或者缩⼩⼀个元素
• 用法示例：以下代码表示将 logo 元素整体放⼤了 10 倍

.logo {
    transform: scale(10);
      }

• 如果需要实现水平放大，垂直缩小等功能时，则需要通过以下代码分开控制

transform: scaleX();transform: scaleY();

Rotate - 旋转

• 概念: Rotate ⽤来旋转⼀个元素
• 用法示例： 以下代码表示将 logo 元素顺时针旋转了 90 度

.logo {
    transform: rotate(90deg);
     }
    

• 如需逆时针旋转，则讲deg值改为负值即可

动画 Animation

• 概念： Animation 可以将从⼀个 CSS 样式配置转换到 另⼀个 CSS 样式配置；动画包括两个部分: 1. 描述动画的样式规则 2. 指定动画开始、结束中间点样式的关键帧。

• 基本用法： 实现⼀个最基本的动画，需要使⽤ animation-name 指定⼀个由 @keyframes 定义的关键帧
  

• Animation 的重要子属性

• animation-name指定由 @keyframes 描述的关键帧名称

• animation-delay设置延时，即从元素加载完成之后到动画序列开始执⾏的这段时间

• animation-direction设置动画在每次运⾏完后是反向运⾏还是重新回到开始位置重复运⾏。

• animation-duration设置动画⼀个周期的时⻓

• animation-iteration-count设置动画重复次数，可以指定 infinite ⽆限次重复动画

• animation-timing-function设置动画速度，即通过建⽴加速度曲线，设置
  动画在关键帧之间如何变化

keyframes - 动画关键帧

• 关键帧⽤来描述 CSS 动画序列中的中间步骤，每个 @keyframes
  规则包含多个关键帧，也就是⼀段样式块语句，每个关键帧有⼀个百分⽐值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式
• 代码用法示例
  
• 代码拆解：

• 在 0% - 30% 时，元素距离顶部的距离由 0 渐变到 50px
• 在 30% - 100% 时，距离顶部由 50px 渐变到 100px。
• 在 0% - 68% 时，元素距离左边的距离由 0 了渐变到 50px，且在动画进⾏到 72% 的进度时，距离不变动。
• 直到动画进度到 100% 时，元素距离左边 100%

用法举例: 使 p 元素由浏览器窗口右边滑至左边

增加关键帧

• 我们想要在动画序列执⾏到 75% 的时候，标题元素的左边 距为 25%，宽度为 150%。那么可以这样设置

• 设置循环：⽆限次数

• 设置来回运动

过渡 Transition

概念：

• 过渡可以为⼀个元素在不同状态之间切换的时候定义不同的过渡效果

• ⽐如在不同的伪元素之间切换，像是 :hover, :active 或者通过JavaScript 实现的状态变化。

• 设置某个属性或所有属性（可⽀持过渡的）⼀定的过渡时间，以及运动曲线。当元素属性/状态发⽣变化时，会按照你设定的过渡效果进⾏变化。

• transition-property：指定要执行过渡的属性

• 多个属性间使用,隔开。如果所有属性都需要过渡，则使用all关键字；基本可以计算的属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡。

属性：

• transition-duration：指定过渡效果的持续时间

• transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

• transition-timing-function：过渡的时序函数 ，指定过渡的方式

transition-timing-function可选值

linear匀速运动
ease 默认值，慢速开始，先加速后减速
ease-in 加速运动 ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier()来指定时序函数https://cubic-bezier.com
steps()分步执行过渡效果，可以设置第二个值 end，在时间结束时执行过渡（默认值）；start，在时间开始时执行过渡

• transition：可以同时设置过渡相关的所有属性：只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

基本用法：以下代码表示当⿏标滑过 ant 元素时，距右边的距离将在 2s内从 10px 增⻓⾄ 100px，运动曲线是 ease-in-out

Css动画总结

1. 简单：能够⾮常容易地创建简单动画，甚⾄不需要了解 JavaScript 就能创建动画。
2. 流畅：动画运⾏效果良好，甚⾄在低性能的系统上。渲染引擎会使⽤跳帧或者其他技术以保证动画表现尽可能的流畅。⽽使⽤ JavaScript 实现的动画通常表现不佳（除⾮经过很好的设计）。
3. 高性能：让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。