css 动画开发
transition 动画
说道css动画,我们首先应该想到的是 css3 transition 属性。
transition 的作用就是让元素的某个css属性从一个状态过度到另一个状态。
transition 就像是一个润滑剂,使这个状态变化不再生硬。
用如下代码实现查看区别:
<div class="demo1">
<div class="square square1"></div>
<div class="square square2"></div>
</div>
.demo1 {
width: 100%;
border: 1px solid red;
height: 100px;
}
.square {
width: 50px;
height: 50px;
position: relative;
left: 0;
}
.square1 {
background-color: blueviolet;
}
.square2 {
background-color: pink;
transition: left 1s;
}
.demo1:hover .square{
left: 200px;
}
疑问:用 transform: translateX(); 来替换 left 来实现位移有什么好处?
transform 属性就像是一个助燃剂,让我们的动画变的丰富多彩。一个主要的特点就是可以实现3D效果。
利用 transition 结合 transform 可实现元素的 3D 过渡动效。
如何实现 3D
3D 变换相较 2D 变换,坐标系中多了 Z 轴。物体除了上下左右,还可以前后移动。
除了坐标轴,我们还要了解几个属性:
-
CSS3 perspective 属性:按字面意思,perspective 就是远景,透视图的意思。设置这个就是让我们能够以透视的效果看元素。perspective 数值与 3D 效果强度是成反比的,数值越大,元素的 3D 效果越不明显,看到的物体离你越远。
-
CSS3 transform-style 属性:让设置的元素的子元素有 3D 的特点,默认 flat 平面效果,3D 效果设置为 preserve-3d
Transition 动画的局限性和适用场景
局限性:
-
支持有限的 CSS 属性:查看支持的属性
-
隐式过渡:只能定义开始结束状态,中途无法控制。
-
transition 需要知道开始状态和结束状态的具体数值。(无法计算0px到auto,display: none到block,background: url(foo.jpg)到url(bar.jpg)等)
-
一次性、不可暂停或反转
-
transition 需要事件触发,所以没法在网页加载的时候自动发生
适用场景:
- 元素「hover」 或「点击」后的反馈
- 弹窗「打开」或「关闭」时的效果
Animation 动画
同样是 css3 属性,animation 属性 才发挥了动画真正的强大。
让元素的动画支持多个状态之间的连续过渡变换、支持循环,甚至支持暂停或反转。
animation 动画需首先掌握两个关键的基本知识点:
- 关键帧(@keyframes)
- animation 属性
关键帧(@keyframes)
- 定义动画名字
- 定义动画开始、中间及结束状态有哪些。(几个关键帧):通过关键词 “from” 和 “to”,等价于 0% 和 100%
animation 属性
定义一个元素整个动画的配置:
- 指定元素用什么动画?名字与 @keyframes 设置的名字相匹配。(animation-name)
- 动画的持续时间是多少?(animation-duration)
- 浏览器用什么样的时间轴函数来执行该动画?(animation-timing-function)
- 是否需要延时执行该动画?(animation-delay)
- 动画循环执行的次数是多少?(animation-iteration-count)
- 动画执行的方向是什么?(animation-direction)
- 动画填充模式是什么?(animation-fill-mode)
- 动画执行状态是运行还是暂停?(animation-play-state)
动画形式
补间动画
补间动画:人为的设定动画的关键帧,关键帧之间的过度状态由计算机自己实现。补间动画是css动画中最常见的。
常见的补间动画实现:
-
transition 属性实现的动画都属于补间动画。transition 只能设定初始和结束时刻的两个关键帧状态。
-
animation 属性使用了除 steps() 以外的时间函数(如 ease、linear 或 cubic-bezier 等)的动画都属于补间动画。animation 是在每个关键帧之间插入补间动画
逐帧动画
逐帧动画,也叫定格动画,将每帧有关联的不同的图片连续播放形成动画。
[逐帧动画实现的方式](https://www.yuque.com/docs/share/866cc8e7-3052-4e14-959a-511c732b5fe1?# 《H5 逐帧动画实现》)
动画性能渲染优化
避免为开销大的属性设置动画
哪些方式:
- 使用切换类名的方式来触发动画
- translate 属性替换 top/left/right/bottom
- scale 属性换 width/height
- opacity 属性替换 display/visibility