H5中的过渡、动画

悠悠 2022-05-10 06:28 373阅读 0赞

transition、animation我的理解分别是：过渡、动画。因为两者的功能较为接近，所以在这我主要整理transition和animation的使用方法。

Transition

1.定义和用法

transition的使用在于让元素的变化有一个过渡的过程，过渡效果执行完毕之后，默认会还原到原始状态，即可以指定状态变化所需要的时间。transition是一个简写属性，用于设置四个过渡属性：

transition-property：规定设置过渡效果的css属性名称

none 没有属性会获得过渡效果all 所有属性都获得过渡效果property 定义应用过渡效果的css属性名称列表，列表以逗号分隔

transition-duration：规定完成过渡效果需要多少秒或毫秒必须设置，否则时长为0,则不产生过渡效果。

transition-timing-function：规定过渡效果的速度曲线，默认值为：ease

linear 匀速（等于 cubic-bezier(0,0,1,1)）

ease 先加速后减速（等于 cubic-bezier(0.25,0.1,0.25,1)）

ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）

ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）

ease-in-out 等同类似于ease（等于 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay规定过渡效果何时开始，即过渡效果开始前需等待的时间，默认值：0

2.transition的局限性

需要事件触发基本结合滑过、点击、焦点事件使用，无法在网页加载时自动发生（除非结合js）

一次性，不能重复发生，除非一再触发只能定义开始和结束状态，不能定义中间状态，即只有两个状态

Animation

1.定义和用法

animation与transition的效果很类似，但是animation可以很好的避免上述所说的transition的局限性。

animation：是一个简写属性，用于设置以下几个动画属性：

animation- name：为 @keyframes（关键帧） 动画规定一个名称

none 规定无动画效果（可用于覆盖来自级联的动画）keyframename规定需要绑定到选择器的keyframe的名称

animation -duration：规定完成动画所花费的时间必须设置，否则时长为0,则没有动画效果

animation -timing-function：规定动画效果的速度曲线，默认值为：easelinear 匀速（等于 cubic-bezier(0,0,1,1)）

ease 先加速后减速（等于 cubic-bezier(0.25,0.1,0.25,1)）

ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）

ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）

ease-in-out 等同类似于ease（等于 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation -delay：规定动画效果何时开始

animation –iteration-count：定义动画的播放次数n 定义动画播放的数值infinite 规定动画应该无限次播放

animation –direction：定义是否轮流反向播放动画normal 默认值。

动画正常播放alternate动画应该轮流反向播放

animation –play-state：（目前支持该属性的浏览器较少）检索或设置对象动画的状态running 默认值。规定动画正在播放paused规定动画已暂停

animation –fill-mode：（目前支持该属性的浏览器较少）检索或设置对象动画时间之外的状态none 默认值。不设置对象动画之外的状态（不改变默认行为）

forwards设置对象状态为动画结束时的状态（在最后一个关键帧中定义）

backwards 设置对象状态为动画开始时的状态（在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。）

both设置对象状态为动画结束或开始的状态（向前和向后填充模式都被应用）

发表评论取消回复

表情：

评论列表（有 0 条评论，373人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）

在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类：.fade-enter-acti...

ゝ一纸荒年。/ 2024年04月22日 22:30/ 0 赞/ 91 阅读

相关 CSS_过渡&动画

过渡transition > 过渡(transition) > \-通过过渡可以指定一个属性发生变化时的切换方式 > \-通过过渡可以创建些非常好的效果，提升用户

﹏ヽ暗。殇╰゛Y/ 2023年10月06日 16:59/ 0 赞/ 65 阅读

相关 React中过渡动画的编写方式

文章目录 React的过渡动画过渡动画库的介绍 CSSTransition(掌握) Swit

川长思鸟来/ 2023年10月02日 20:56/ 0 赞/ 15 阅读

相关 Vue 过渡 & 动画

概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使用

Love The Way You Lie/ 2023年07月01日 12:53/ 0 赞/ 32 阅读

相关 vue过渡动画

vue 过渡动画可以分为两部分 1.vue内置类名：匿名动画，具名动画内置类名：进入进入前动画名-enter

￡神魔★判官ぃ/ 2022年11月29日 12:23/ 0 赞/ 285 阅读

相关 android5.0之Activity过渡动画

android5.0之Activity过渡动画 Android5.0提供了3种Transition类型。 1. 进入动画：一个进入的过渡动画决定一个Activit

深藏阁楼爱情的钟/ 2022年09月21日 11:47/ 0 赞/ 400 阅读

相关 H5中的过渡、动画

transition、animation我的理解分别是：过渡、动画。因为两者的功能较为接近，所以在这我主要整理transition和animation的使用方法。 Tr

悠悠/ 2022年05月10日 06:28/ 0 赞/ 374 阅读

相关 H5动画实现---过渡

通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两

短命女/ 2022年05月09日 02:14/ 0 赞/ 407 阅读

相关 vue中组件的过渡动画

1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-le

灰太狼/ 2022年04月15日 03:56/ 0 赞/ 322 阅读

相关 Vue中使用 transition动画，vue过渡动画

[Vue][]的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利

小鱼儿/ 2022年03月11日 08:08/ 0 赞/ 924 阅读