前端动画技术Animations和Transition
Animations（动画）
Animations（动画）是一种css3技术，可以创建复杂的动画效果。与Transitions相比，Animations更加灵活，可以在任意时刻控制动画的进度和状态。
Animations（动画）通过设置animation属性，并结合@keyframes（关键帧）定义的动画序列，来实现对页面元素的动画效果。
常用的Animations属性
-
animation-name：动画的名称
-
animation-duration：动画的持续时间，单位为秒或毫秒
-
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分别表示贝塞尔曲线的四个点的坐标值。通过调整这些参数，可以实现更加复杂的动画效果。
-
animation-delay:动画延迟的时间，单位为秒或毫秒
-
animation-iteration-count：动画的循环次数，可以指定具体的数字，也可以使用infinite表示无限循环。
-
animation-direction：动画的方向，可以是normal（默认值）、reverse（反向播放）、alternate（交替正向和反向播放）或alternate-reverse（交替反向和正向播放）。
-
animation-fill-mode：动画结束后元素的状态，可以是none（默认值）、forwards、backwards或both。
- none 默认值，动画结束后元素会回到初始状态，即不保留动画效果的任何变化
- forwards：动画结束后元素会保持动画的最后一帧的状态。换句话说，元素将停留在动画的最终状态，而不会回到初始状态。
- backwards：表示在动画播放之前（在动画开始之前）元素将应用动画的初始状态。元素会立即跳转到动画的第一帧状态，然后再开始播放动画。
- both：表示动画结束后元素同时应用forwards和 backwards的效果。元素首先会应用动画的初始状态，然后播放动画并保持在最后一帧的状态
- animation-play-state：动画的播放状态，可以是running（运行）或paused（暂停）。
常见的Animations简写语法
javascript">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)
/**标记全部已读*/
function handleMarkAllAsRead() {
setMessageRead().then(
(response) => {
proxy.$modal.msgSu***ess("全部已读");
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() 函数结合使用时，可以实现元素的倾斜效果
使用示例
<script setup>
import e_2 from '/src/assets/e_2.png'
</script>
<template>
<img :src="e_2" alt="" class="circle_img">
</template>
<style scoped>
.circle_img {
animation: round 10s linear infinite;
}
@keyframes round {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
效果如下：
bandicam
使用示例
Transitions（过渡）
常用的Transitions属性
-
transition-property：需要过渡的CSS属性
- none 不对任何属性进行过渡
- all 对元素所有属性进行过渡，包括宽度、高度、颜色、背景等。
- propety 只对指定的属性进行过渡，多个属性以逗号隔开。
-
transition-duration：过渡的持续时间。
-
transition-timing-function：过渡的时间函数。同animation-timing-function
-
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属性的值将从蓝色过渡到红色，过渡效果平滑。
