【CSS】CSS动画

yybb717
343 阅读5分钟

一、 动画

1、定义

由许多静止的画面（帧）以一定速度连续播放时，肉眼因为视觉残像会产生错觉，而误以为是活动的画面。

2、概念

  • 帧：一个静止的画面
  • 播放速度： 每秒24帧（影视）或每秒30帧（游戏）

二、CSS 动画的两种做法

1、transition过渡

2、animation

三、transform变形

1、必读文档

2、四个常用功能

  • 位移translate
  • 缩放scale
  • 旋转rotate
  • 倾斜skew

经验

①一般都需 要配合transition过渡

②inline元素不支持transform,需要先变成block

3、transform之translate位移

①常用写法

  • translateX(length-percentage) ：x轴方向往右移动 演示代码
  • translateY(length-percentage)：y轴方向向下移动 演示代码
  • translate( length-percentage，length-percentage? )：X与Y的合写
  • translateZ(length)且父容器有perspective属性用于定义视点（原点）：垂直于视点所在平面。视点为0，数字越大，距离视点越远，图像越大。反之，数字越小，距离视点越近，图像越小。 演示代码
  • translate3d(x, y, z)：X、Y、Z的合写

②经验

  • 要学会看懂MDN的语法示例
  • translate(-50%,- 50%)可做绝对定位元素的居中
  left: 50%;
  /*  左边缘放在参照元素正中央 */
  
  top: 50%;
  /*  上边缘放在参照元素正中央 */
  
  transform: translateX(-50%) translateY(-50%);
  /*向左移动自己宽度的50% ，此时水平方向居中了。 向上移动自己高度的50% ，此时竖直方向居中了。整个都在参照元素中居中了*/

示例代码

  • 调试

4、transform之scale缩放

①常用写法

  • scale( <number> )：XY方向一起缩放多少倍数
  • scaleX( <number> )：X方向缩放
  • scaleY( <number> )Y方向缩放
  • scale( <number>，<number>? )：X、Y方向合写

②经验

  • border也会一起缩放
  • 用得较少，因为容易出现模糊

5、transform之rotate旋转

① 常用写法

  • rotate( [ <angle>| <zero> ]):（用的最多）默认是绕着垂直于屏幕的z轴旋转，从12点方向顺时针旋转
  • rotateZ( [ <angle> | <zero> ])：同上
  • rotateX( [ <angle> | <zero> ])：绕着x轴旋转
  • rotateY( [ <angle>| <zero> ])：绕着Y轴旋转
  • rotate3d：太复杂，无法用语言表述

演示代码

② 经验

  • 一般用于 360度旋转制作loading
  • 用到时再搜索rotate MDN看文档

6、transform之skew倾斜

① 常用写法

  • skewX( [ <angle> | <zero> ]):把x轴倾斜
  • skewY( [ <angle> | <zero> ])：把Y轴倾斜
  • skew( [ <angle> | <zero> ],[ <angle>| <zero> ]?) 演示代码

② 经验

  • 用得较少
  • 用到时再搜skew MDN文档

7、transform多重效果

组合使用：用空格隔开

  • transform: scale(0.5) translate(-100%，- 100%);
  • transform: none;取消所有

四、transition过渡

1、必读文档

2、作用

补充中间帧。必须给出开头和结束，中间自动补齐。一般会有一次或者两次动画。比如hover和非hover就是两次动画。

3、语法

  • transition:属性名 时长 过渡方式 延迟

    例如transition: left 200ms linear

  • 可以用逗号分隔两个不同属性,可以用all代表所有属性

    例如transition: left 200ms, top 400ms , transition: all 200ms

  • 时长和延迟的单位可以写s、ms

  • 过渡方式有: linear | ease | ease-in | ease- out | ease- in-out | cubic-bezier step-start | step-end | steps, 具体含义要靠数学知识

  • 演示代码

4、注意：并不是所有属性都能过渡（学好js回来看一遍16.5视频）

  • 看见到看不见

    display: block => none没法过渡，直接变没了，消失

    一般改成visility: visible => hidden

    display和visibility的区别自己搜一下

  • background颜色可以过渡:因为颜色是数字

  • opacity透明度可以过渡

五、animation

1、@keyframes完整语法

①必看文档：keyframes MDN

②总共两种写法

  • 一种写法是from to
  • 一种写法是百分数

2、animation缩写语法

animation:时长|过渡方式|延迟|次数|方向|填充模式 |是否暂停|动画名;

  • 时长: 1s或者1000ms
  • 过渡方式:跟transition取值一样，如linear
  • 次数: 3或者2.4或者infinite
  • 方向: reverse（反过来）| alternate（过去过来） |alternate-reverse（先回在去）
  • 填充模式: none | forwards（到最后一帧了就不回来了） | backwards | both
  • 是否暂停: paused | running *以上所有属性都有对应的单独属性。要是修改直接修改单独属性，不用整个都在写一遍了,在js里写。（MDN+animation）

六、实战--只为bb跳动的心

1、爱心设计

2、步骤

① CSS reset

② 把三块内容基本的边框、宽、高写好

③ 把三块内容的位置定好

  • 用绝对定位
  • 用transform

④ 动画效果

方法一:

  • 设置鼠标浮上去即变化：hover+具体变化transform: scale(0.5);
  • 用transition过渡，做成动画效果
  • 代码

方法二:

  • 使用@keyframes和animation
  • 代码

4、心得

  • CSS需要你有想象力，而不是逻辑
  • CSS给出的属性都很简单，但是可以组合得很复杂

七、动画有个中间点

1、方法一：使用两次transform

  • .a === transform===> .b
  • .b === transform===> .c
  • 如何知道到了中间点呢：用setTimeout或者监听transitionend事件
  • 演示代码

2、方法二：使用animation

八、CSS动画优化

  1. 用transform代替left
  2. JS优化：使用requestAnimationFrame代替setTimeout或 setInterval
  3. CSS优化：使用will-change或translate

九、例子：将div从左往右移动

（一）菜鸟版

  1. 原理：每过一段时间（用setlnterval做到），把div移动一小段距离，直到移动到目标地点。
  2. 代码
  3. repaint（重新绘制），属于第一种更新方式

（二）高阶版

  1. 原理
  • transform: translateX(0 => 300px)
  • 直接修改会被合成，需要等一会修改
  • transition过渡属性可以自动脑补中间帧
  1. 代码
  2. 没有repaint，属于第三种更新方式。性能更好！
avatar
文章
阅读
粉丝