transition动画与animation 动画

程序员文章站 2022-05-04 19:55:36

...

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

3D transform 的小 demo 学习

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

transition动画与animation 动画

css 动画开发