CSS动画

limo_chen
144 阅读4分钟

一，动画的原理

1. 动画：由许多静止画面（帧）以一定速度（如每秒30张）连续播放时，肉眼因视觉残像而产生错觉误以为是活动的画面

2. 概念：

- 帧：每个静止画面都叫帧

- 播放速度：每秒24帧（影视）或者每秒30帧（游戏），最高120帧都有，那就需要比较好的显卡了

二，浏览器渲染原理

步骤：

  1. 根据html构建html树（DOM）
  2. 根据css构建css树（cssom）
  3. 将两棵树合并成一棵渲染树（render tree）
  4. layout布局（文档流 盒模型 计算大小和位置）
  5. paint绘制（把边框颜色，文字颜色，阴影都画出来）
  6. compose合成（根据层叠关系展示画面）

三，CSS 动画的两种做法（transition 和 animation）

css中实现动画有两种方式：transition过渡动画、 animation自定义动画

Transition

在不使用transition过渡动画，若通过用户的交互直接改变css样式属性，通常是立即显示效果，如果我们希望有过渡效果，可以使用上transition过渡动画

transition属性如下：

  • transition-property 指定使用过渡效果的css属性
  • transition-duration 设置过渡动画持续时间
  • transition-timing-function 设置动画的过渡方式
  • transition-delay 设置动画的延迟时间

详细说明：

1. transition-property :用于指定使用过渡效果的css属性，默认值为all,可以用all代表所有属性，如果我们只想让其中某一个元素产生过渡效果，只需要明确指定transition-property:font-size即可

2. transition-duration：设置过渡动画持续时间，默认值为0s，可设置1s,.5s等

  1. transition-timing-function： 设置动画的过渡方式，可以用来改变动画的速度及往返轨迹，属性如下：
  • linear ：动画从头到尾的速度是相同的
  • ease（缓和，减轻）:默认值，动画以低速开始，然后加快，在结束前变慢
  • ease-in：动画以低速开始
  • ease-out：动画以低速结束
  • ease-in-out ：动画以低速开始和结束
  1. transition-delay：设置动画的延迟时间，即延迟后开始动画，单位为s

5. transition综合属性：各个值之间使用,隔开，顺序是transition：transition-property(属性名),transition-duration（时长）,transition-timing-function（过渡方式）,transition-delay（延迟）

Animation

定义：Animation属性用来指定一组或多组动画，每组之间用逗号相隔。

Animation有两种写法：第一种写法是from to

另一种是百分数 keyframes(标准写法)

  1. 通过@keyframes自定义关键帧动画并为动画命名，可以在其中对每一帧进行设置。
  2. 使用自定义动画的元素，需要通过animation相关属性进行配置

keyframes(关键帧)

在css样式表中可以通过@keyframes来设置关键帧动画，并指定动画名称供使用者锁定

  • 通过百分比来设置具体帧数的样式
  • 0%和100%代表首尾帧,也可分别使用from、to替代(自定义动画未定义首尾帧，则首尾帧将会应用使用者的原有样式)

动画定义完毕，使用者需要配置animation8个属性对动画进行配置

属性如下： animation：animation-duration（时长） / animation-timing-function（过渡方式） / animation-delay（延迟 ）/ animation-iteration-count（次数） / animation-direction(方向) / animation-fill-mode(填充模式)/animation-play-state（是否暂停） / animation-name(动画名)

1. animation-name: animateName：定义使用动画的元素

2. animation-duration：定义动画持续时间，默认0s，可设置1s,.5s（可简写.5s）若不配置animation-duration则默认请况下是没有动画效果的，一定要配置

3. animation-timing-function用于定义元素过渡方式，即动画随时间的运动速率和轨迹

  • linear：匀速
  • ease ：默认值，动画以低速开始，然后加快，在结束前变慢
  • ease-in：动画以低速开始
  • ease-out：动画以低速结束
  • ease-in-out：动画以低速开始和结束
  • animation-delay：动画延迟开始
  • animation-iteration-count：用于设置动画执行的次数，默认值为1，执行一次，具体值具体执行次数，infinite:执行无限次

4. animation-direction：用于设置动画执行方向

具体来说可设置为以下值：

  • normal ：默认值，动画按正常播放
  • reverse ：动画反向播放
  • alternate：（交替的）动画正向交替执行（正向->反向）Loop
  • alternate-reverse ：动画反向交替执行（反向->正向）Loop
  • inherit：从父元素继承该属性

5. animation-fill-mode：用于设置动画的填充模式

  • none:默认值 没有填充
  • infinite，由于动画次数无限执行，不会结束，也就不会应用最后帧样式

6. animation-play-state:动画是否暂停，通常配合JavaScript动态控制

  • running:默认值
  • paused:暂停，动画将停止执行

7. Animation综合属性

总结：需要一定的背诵记忆和操作，多敲键盘

avatar
文章
阅读
粉丝