【CSS】过渡动画

这篇具有很好参考价值的文章主要介绍了【CSS】过渡动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

过渡动画

不加过渡动画,变化不太流畅

1 css 属性

MDN css transitions

1.1 transform 变换(平移旋转缩放)

w3school transform

  • transform:用于元素的变形,显示变形后的状态,不是变形的过程,变形过程需要配合transition表示
    • 2D 转换
      • translate(50px, 100px) 平移
      • rotate(20deg) 顺时针旋转 20 度
      • rotateX(150deg) 绕其 X 轴旋转给定角度
      • scaleX(2) 增大为其原始宽度的两倍
      • scaleY(0.5) 缩减为其原始高度的一半
      • scale(2, 3) 增大为其原始宽度的两倍和其原始高度的三倍
      • skewX(20deg) 沿 X 轴倾斜 20 度
      • skewY(20deg) 沿 Y 轴倾斜 20 度
      • skew(20deg, 10deg) 沿 X 轴倾斜 20 度,同时沿 Y 轴倾斜 10 度
      • matrix() 方法把所有 2D 变换方法组合为一个
        • matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
        • transform: matrix(1, -0.3, 0, 1, 0, 0);
函数 描述 函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。 translate3d(x,y,z) 定义 3D 转化。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。 translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。 translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。 scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。 scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。 scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate(angle) 定义 2D 旋转,在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
perspective(n) 定义 3D 转换元素的透视视图。

1.2 animation 动画

w3school animation

animation: [ * animation-name] [ * animation-duration]
  [animation-timing-function] [animation-delay] [animation-iteration-count]
  [animation-direction] [animation-fill-mode] [animation-play-state];
  • animation:动画
    • *animation-name:关键帧的名字,该参数必需。
    • *animation-duration:动画持续的时间,该参数必需。
    • animation-timing-function:定时器函数,默认是ease
    • animation-delay:动画效果多少秒后开始,默认为0
    • animation-iteration-count:动画重复的次数,可以指定为一个整数,表示多少次,默认值是infinite关键字,表示无限次。
    • animation-direction:动画方向,可能的值为forwardbackwardalternating,默认值为normal
    • animation-fill-mode:默认值为none
    • animation-play-state:动画默认是否生效,默认值为running

1.2.1 keyframes

MDN keyframes

  • 关键帧 @keyframes 规则通过在动画序列中定义关键帧(或 waypoints)的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比,关键帧 keyframes 可以控制动画序列的中间步骤。
@keyframes myname {
  0% {
    top: 0px;
  }
  25% {
    top: 200px;
  }
  50% {
    top: 100px;
  }
  75% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}
keyframes rotation {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(450deg);
  }
}

1.3 transition 过渡

transition: [ * transition-property] [ * transition-duration]
  [transition-timing-function] [transition-delay];
  • transition: 该状态变至其他状态的过渡过程
    • 单个属性:transition: background-color 2s;
    • 多个属性:
      • transition: background-color 2s, height 1s ease-in-out;
      • transition: width 2s, height 2s, transform 2s;
  • transition-property: 元素的哪一个 CSS 属性需要过渡效果,该参数必需
    • all:全部属性
  • transition-duration: 过渡效果的持续时间,该参数必需
  • transition-timing-function: 定时函数,默认是ease
    • linear:线性运行,各个时刻速度都一样。
    • ease: 快速加速,然后逐渐减速,CSS 的默认值。
    • ease-in:逐渐加速,结尾时变快,适用于退出页面显示的元素。
    • ease-out:开始时速度最快,然后逐渐慢下来,适用于进入页面显示的元素。
    • ease-in-out:主键加速然后变慢,与ease相似,但开始时加速较慢,适合那些在页面有着明确开始和结束的动画。
  • transition-delay: 过渡从多少秒以后开始,默认是0

1.4 比较

  • animation 强调流程与控制,对元素的一个或多个属性的变化进行控制,可以有多个关键帧(animation@keyframes结合使用)

  • transition 强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,

    • 而第二个途径当某种改变发生(例如 hover)时才能获取样式,这样就会产生过渡动画。
    • 可以认为它有两个关键帧的 animation
  • 状态 a -> b:

    • width: 100->300
    • transition: width 2s;
  • 状态 b -> a:

    • width: 300->100
    • transition: width 6s;
a {
  width: 100px;
  transition: width 2s;
}

b {
  width: 300px;
  transition: width 6s;
}

2 方式

2.1 css 伪类

w3school css 过渡

  • 常需要应用过渡动画的伪类选择器

    • :hover 当用户悬浮到一个元素之上的时候匹配。
    • :active 在用户激活(例如点击)元素的时候匹配,点击时应用,松开就结束
  • 原选择器:过渡前的状态、过渡的过程(该状态变至其他状态的过渡过程)

  • 伪类选择器:过渡后的状态(可以只写有变更的样式)

/* 把鼠标悬停在 div 元素上,宽度变宽的过渡效果 */
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

2.2 vue 组件

vue Transition

  • <Transition> 是一个内置组件
  • 进入或离开可以由以下的条件之一触发
    • v-if 所触发的切换
    • v-show 所触发的切换
    • 由特殊元素 <component> 切换的动态组件

css过度动画,前端,css,css3,前端,vue.js,es6

  • v-enter-from:进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。
  • v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
  • v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。
  • v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。
  • v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
  • v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时),在过渡或动画完成之后移除。

2.2.1 默认名称

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

2.2.2 自定义名称

<Transition name="fade"> ... </Transition>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

2.2.3 自定义 class

<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

2.2.4 配合 animation

<Transition name="bounce">
  <p v-if="show" style="text-align: center;">Hello here is some bouncy text!</p>
</Transition>
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

2.2.5 多层

尽管过渡 class 仅能应用在 的直接子元素上,我们还是可以使用深层级的 CSS 选择器,在深层级的元素上触发过渡效果

在这种情况下,你可以通过向 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间

2.2.6 封装

<!-- MyTransition.vue -->
<script>
  // JavaScript 钩子逻辑...
</script>

<template>
  <!-- 包装内置的 Transition 组件 -->
  <Transition name="my-transition" @enter="onEnter" @leave="onLeave">
    <slot></slot>
    <!-- 向内传递插槽内容 -->
  </Transition>
</template>

<style>
  /*
  必要的 CSS...
  注意:避免在这里使用 <style scoped>
  因为那不会应用到插槽内容上
*/
</style>

2.3 vue 组件

是一个内置组件,用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

2.3.1 示例列表

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">{{ item }}</li>
</TransitionGroup>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

2.4 class 变化

过渡动画的 css 可以另起一个 css 文件书写

vue 点击图标旋转

2.4.1 点击旋转

<style lang="css" scoped>
  .a {
    transition: all 2s;
  }
  .g {
    transform: rotate(-180deg);
    transition: all 2s;
  }
</style>
<template>
  <div>
    <a-icon type="up" :class="[state?'g':'a']" @click="Change" />
    //class随state的true或者false改变
  </div>
</template>
<script>
  export default {
    data() {
      return {
        state: false,
      };
    },
    methods: {
      Change() {
        this.state = !this.state;
        console.log(this.state);
      },
    },
  };
</script>

2.4.2 点击持续旋转

<uni-icons
  :class="{ rotation: rotation }"
  type="refreshempty"
  @click="onRefresh"
/>

<script>
  const rotation = ref(false);

  const onRefresh = () => {
    rotation.value = !rotation.value;
  };
</script>
// 持续旋转
.rotation {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

2.4.3 点击折叠收起

<scroll-view class="scroll" v-if="isShow" scroll-y></scroll-view>

把 v-if 改为两种 class 的转变,再加上过渡

<scroll-view
  class="scroll"
  :class="[isShow ? 'scroll--full' : 'scroll--null']"
  scroll-y
></scroll-view>
.scroll {
  box-sizing: border-box;
  width: 440rpx;
  font-weight: 300;
  background: #ffffff;
  border-radius: 5px;
  border: 1rpx solid;

  transition-property: all;
  transition-duration: 0.1s;
}

.scroll--full {
  border-color: #999999;
  max-height: 155rpx;
}

.scroll--null {
  border-color: #ffffff;
  max-height: 0rpx;
}

3 效果

  • 下拉选择
    • 下拉框:展开
    • 下拉箭头:旋转
  • 弹窗:缩放、淡入淡出
  • 增删:移走

3.1 淡入(fade in)

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  animation: fade-in 1s forwards linear;
}
/* 淡入淡出 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

3.2 上浮(fade up)

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(3em);
  }
  100% {
    opacity: 1;
    transform: translateY(none);
  }
}
.fade-up {
  animation: fade-up 3s cubic-bezier(0.05, 0.98, 0.17, 0.97) forwards;
}

3.3 左右摆动(wiggle)

@keyframes wiggle {
  0%,
  7% {
    transform: rotateZ(0);
    opacity: 0;
  }
  15% {
    transform: rotateZ(-15deg);
    opacity: 1;
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}

3.4 上下弹跳(bounceAround)

.animation {animation: bounceAround 1.1s ease-in-out infinite;
}

@keyframes bounceAround {
	0% {transform:translateY(0);}
	20% {transform:translateY(-60px) rotate(0deg);}
	25%{transform:translateY(20px) rotate(0deg);}
	35%, 55%{transform:translateY(0px) rotate(0deg);}
	60% {transform: translateY(-20px) rotate(0deg);}
	100%{transform: translateY(-20px) rotate(360deg);}
}

4 性能考量

CSS 制作动画属性大多是 transform 和 opacity 之类的。用这些属性制作动画非常高效,因为:
他们在动画过程中不会影响到 DOM 结构,因此不会每一帧都触发昂贵的 CSS 布局重新计算。
大多数的现代浏览器都可以在执行 transform 动画时利用 GPU 进行硬件加速。
相比之下,像 height 或者 margin 这样的属性会触发 CSS 布局变动,因此执行它们的动画效果更昂贵,需要谨慎使用。我们可以在 CSS-Triggers 这类的网站查询哪些属性会在执行动画时触发 CSS 布局变动。文章来源地址https://www.toymoban.com/news/detail-763460.html

到了这里,关于【CSS】过渡动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)

    兄弟选择器:选择平级元素的唯一办法 -适用:通过已知元素选择之后的平级兄弟元素时 1、相邻兄弟选择器: 2、通用兄弟选择器: 属性选择器: -通过元素的属性来定位元素 1、通用:基本用不着,太泛了 2、自定义:4种 1、精确条件: 2、模糊条件: 3、模糊条件:很少用,

    2024年04月09日
    浏览(51)
  • 【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)

    1. 前言         本篇开始介绍Web2D和3D相关基础知识,会从CSS3的2D/3D转换、过渡、动画,讲到Canvas 2D图形绘制,再到SVG,最后到WebGL。         坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下,z轴正方向向外(垂直屏幕向外)。 2. 2D转换         CSS3的2D/3D旋

    2024年02月04日
    浏览(49)
  • CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例(两面翻转的盒子、3D导航栏、旋转木马案例)

    目录 一、CSS3过渡(transition)(重点) 二、CSS3过渡练习——进度条案例 三、CSS3 2D转换(translate、rotate、scale、转换中心点transform-origin) 四、CSS3 动画 五、CSS3动画常见属性 五、热点图案例(动画) 六、速度曲线之steps步长(案例——奔跑的熊大) 七、CSS3 3D转换(3D 位移:t

    2024年02月03日
    浏览(47)
  • 【Web前端开发基础】CSS3之空间转换和动画

    目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果 1.1 概述 空间:是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同 空间转换也叫3D转换 属性:transform 2D转换能够改变元素X轴和Y轴方向特性,3D转换还能改变Z轴方向特

    2024年01月25日
    浏览(50)
  • css3的过度效果transition支持哪些属性,Transition 所支持的css属性

    transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: 名称 描述 属性 color:  通过红、绿、蓝和透明度组件变换(每个数值处理) 如: background-color, border-color, color, outline-color等css属性; length: 真实的数字 如: word-spacing, width, verti

    2024年01月17日
    浏览(48)
  • css3过渡

    CSS3 过渡(CSS3 Transitions)是一种在元素从一种状态到另一种状态时,平滑地改变样式属性值的方法。它允许你在样式属性值变化时添加动画效果,而无需使用JavaScript或Flash。过渡是制作交互性和动画效果的有力工具,以下是 CSS3 过渡的基本概念和用法: 1. **基本语法**:    

    2024年02月07日
    浏览(41)
  • day8 CSS3渐变gradients+CSS3过渡transition

    属性 transition 简写属性,用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 transition-delay 规定过渡效果何时开始。默认

    2024年01月17日
    浏览(43)
  • 【CSS】过渡动画

    不加过渡动画,变化不太流畅 MDN css transitions w3school transform transform :用于元素的变形,显示变形后的状态,不是变形的过程,变形过程需要配合 transition 表示 2D 转换 translate(50px, 100px) 平移 rotate(20deg) 顺时针旋转 20 度 rotateX(150deg) 绕其 X 轴旋转给定角度 scaleX(2) 增大为其原始

    2024年02月04日
    浏览(35)
  • CSS基础-过渡动画

    CSS3新添加了过渡动画, 即使用者定义好 一个元素的 开始状态 和 结束状态 , CSS会根据变化曲线形成 补间动画 效果。 CSS3中用 transition 属性来描述动画如何运动。 定义 下面我们重点了解下, 哪个属性需要过渡 , 还有 变化曲线是什么 下面我们重点聊聊两点: 哪个属性需要

    2024年02月10日
    浏览(49)
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-1 CSS3过渡

    上述代码中: 第8-16行代码定义.box的样式,设置透明度为1,transition的值为3s; 第18~20行代码定义元素的透明度为0,表示当鼠标指针悬停在.box元素上时元素隐藏,当鼠标离开盒子时元素显示。 在CSS3之前,由于没有过渡属性transition,当修饰CSS样式时,CSS样式属性值就会瞬间变

    2024年01月21日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包