前端动画技术Animations和Transition

前端动画技术Animations和Transition

Animations（动画）

Animations（动画）是一种CSS3技术，可以创建复杂的动画效果。与Transitions相比，Animations更加灵活，可以在任意时刻控制动画的进度和状态。
Animations（动画）通过设置animation属性，并结合@keyframes（关键帧）定义的动画序列，来实现对页面元素的动画效果。

常用的Animations属性

1. animation-name：动画的名称
2. animation-duration：动画的持续时间，单位为秒或毫秒
3. animation-timing-function：动画的时间函数，用于控制动画的进度曲线，animation-timing-function有：- ease 默认的时间函数，动画缓慢开始、然后逐渐变快，最后缓慢结束。通常被用于平滑的过渡效果。- linear 恒定的速度播放 近似cubic-bezier(0, 0, 1, 1)- ease-in 缓慢开始，先慢后快 近似cubic-bezier(0.42, 0, 1, 1)- ease-out 缓慢结束，先快后慢 近似cubic-bezier(0, 0, 0.58, 1)- ease-in-out 缓慢开始、逐渐加速、缓慢结束 近似cubic-bezier(0.42, 0, 0.58, 1)- 自定义时间函数，可以通过cubic-bezier()来定义一个贝塞尔曲线，例如：animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);其中参数0.1、0.7、1.0和0.1分别表示贝塞尔曲线的四个点的坐标值。通过调整这些参数，可以实现更加复杂的动画效果。
4. animation-delay:动画延迟的时间，单位为秒或毫秒
5. animation-iteration-count：动画的循环次数，可以指定具体的数字，也可以使用infinite表示无限循环。
6. animation-direction：动画的方向，可以是normal（默认值）、reverse（反向播放）、alternate（交替正向和反向播放）或alternate-reverse（交替反向和正向播放）。
7. animation-fill-mode：动画结束后元素的状态，可以是none（默认值）、forwards、backwards或both。

• none 默认值，动画结束后元素会回到初始状态，即不保留动画效果的任何变化
• forwards：动画结束后元素会保持动画的最后一帧的状态。换句话说，元素将停留在动画的最终状态，而不会回到初始状态。
• backwards：表示在动画播放之前（在动画开始之前）元素将应用动画的初始状态。元素会立即跳转到动画的第一帧状态，然后再开始播放动画。
• both：表示动画结束后元素同时应用forwards和 backwards的效果。元素首先会应用动画的初始状态，然后播放动画并保持在最后一帧的状态

1. animation-play-state：动画的播放状态，可以是running（运行）或paused（暂停）。

常见的Animations简写语法

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;animation: 动画名 持续时间 速度曲线 延迟时间 循环次数 运动方向 结束后的状态 播放状态;

注意：其中顺序不固定，animation-duration和animation-name是必需的，如果同时指定了animation-delay和animation-duration，通常情况下先写animation-duration。

关键帧的定义方式

方式一：from和to关键字

@keyframes animation-name {
  from {/* 初始状态样式 */}
  to {/* 结束状态样式 */}}

方式二：百分比

@keyframes animation-name {0%{/* 初始状态样式 */}50%{/* 中间状态样式 */}100%{/* 结束状态样式 */}}

Animations的使用示例

@keyframes rotate {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}}.box {width: 100px;height: 100px;
  background-color: red;
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;}

<i-ep-warn-triangle-filled ref="logo" @click="handleNews" style="color: brown; width: 40px;":class="{ blink: disabled }"/>const disabled =ref(false)/**标记全部已读*/functionhandleMarkAllAsRead(){setMessageRead().then((response)=>{
      proxy.$modal.msgSuccess("全部已读");
      disabled.value =false;//logo停止闪烁
      isAllRead.value =true;//修改颜色});}.blink {// animation: blink 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;animation: blink 0.8s ease-in infinite;transform:scale(1)translate3d(0,0,0);}

@keyframes blink {0%,100%{opacity:0.3;transform:scale(1)translate3d(-4px,0,0);}50%{opacity:1;transform:scale(1.2)translate3d(4px,0,0);}}

实现效果如下：
只闪动和缩放

animation动画

闪动缩放平移

animation动画

补充：transform 属性与 scale() 函数结合使用时，可以实现元素的放大缩小效果
与 translate3d() 函数结合使用时，可以实现元素的平移效果
与 rotate() 函数结合使用时，可以实现元素的旋转效果
与 skew() 函数结合使用时，可以实现元素的倾斜效果

Transitions（过渡）

常用的Transitions属性

1. transition-property：需要过渡的CSS属性- none 不对任何属性进行过渡- all 对元素所有属性进行过渡，包括宽度、高度、颜色、背景等。- propety 只对指定的属性进行过渡，多个属性以逗号隔开。
2. transition-duration：过渡的持续时间。
3. transition-timing-function：过渡的时间函数。同animation-timing-function
4. transition-delay：过渡的延迟时间

常见的Transitions简写语法

transition: property duration timing-function delay;

Transitions的使用示例

.button {
  background-color: blue;transition: background-color 0.3s ease-in-out;}.button:hover {
  background-color: red;}

指定了background-color属性的过渡效果，持续时间为0.3秒，时间函数为ease-in-out。当鼠标悬停在按钮上时，background-color属性的值将从蓝色过渡到红色，过渡效果平滑。