前端动画技术Animations和Transition

前端动画技术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简写语法
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属性
  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属性的值将从蓝色过渡到红色,过渡效果平滑。

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端动画技术Animations和Transition

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买