[css] 请说说在什么时候用transition？什么时候使用animation？

最新推荐文章于 2022-07-06 17:40:36 发布
最新推荐文章于 2022-07-06 17:40:36 发布
阅读量1.5k 收藏
点赞数 20
分类专栏： # 前端面试题css目录汇总
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43392489/article/details/113802296
版权

[css] 请说说在什么时候用transition？什么时候使用animation？


    transition 相当于是个过度动画，需要又过度效果才会触发。一般用来做元素的放大缩小、平移旋转等简单的操作。transition 只执行一次，当需要执行多次时，一般会利用 :hover 等时机或者使用 javaScript 改变类名进行控制。
    animation 需要自己设定关键帧，可以做相对复杂的操作，比如延迟、循环播放等。一般在需要比较复杂的情况才会使用 animation。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

前端小歌谣
关注
专栏目录
前端面试（一）
南京小龙虾的博客
03-09 414
最近在考虑换个新的环境，所以先找了家公司面了下试试水，虽然不知道结果，但是把题目记录下来当做一次学习经历吧！ 一、html语义化意义，作用，原因，理解： 1.使代码结构更清晰，在没有CSS的情况下也能呈现出代码层次结构 2.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页 3.提升搜索引擎优化(SEO)的效果 4.便于团队开发和维护，语义化更具可读性，代码更好...
css3中什么时候用transition什么时候用animation实现动画
weixin_34250709的博客
09-12 348
在css3中transition和animation都可以实现动画效果，但是我们什么时候用transition，什么时候用animation。 当有事件触发动画的时候我们就用transition。比如hover事件mouseove、mouseout事件等等 当没有事件触发直接播放的时候我们就用animation。 ...
css3 操作动画要点
weixin_34348111的博客
09-03 162
CSS3 有3种和动画相关的属性：transform, transition, animation。 不同点： 1.  触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。 2. 循环。 animation可以设定循环次数。 3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能...
CSS3动画
素描本里的男子的博客
05-25 356
一、transition过渡动画 语法: transition: 过渡属性 过渡时间 过渡延迟时间 过渡方式; 1.transition-property(过渡属性) 取值： none 默认值，没有属性发生过渡 all 所有发生变化的css属性都添加过渡 eg: transition:all 1s; ident 指定发生过渡的css属性列表 eg: transition:tra...
transition 和 animation的区别
鹏仔工作室的秘密基地
11-14 402
详情 http://www.sharedblog.cn/?post=30 transition 和 animation的区别：   1.    transition 需要触发条件，不能在页面加载时自动发生   2.    transition 默认只能执行一次，再次执行需要再次触发   3.    transition 只有开始和结束两个状态，不能设置中间的状态   4.    ...
CSS3中的Transition过度与Animation动画属性使用要点
12-13
在CSS3中，Transition（过渡）和Animation（动画）是两个强大的特性，它们极大地丰富了网页的视觉表现力。Transition允许元素的CSS属性值在特定事件触发时平滑过渡，而Animation则允许创建复杂的自定义动画序列。 ...
什么是css3 transform? transition? animation? 区别是什么?
最新发布
03-21
CSS3 transition是一种CSS属性，用于控制元素在状态改变时的过渡效果，比如颜色、大小、位置等属性的变化。CSS3 animation是一种CSS属性，用于创建动画效果，可以控制元素的关键帧、持续时间、延迟时间等属性。它们...
使用CSS transition和animation改变渐变状态的实现方法
09-22
在CSS世界中，transition和animation是两种强大的工具，它们能够为网页元素添加平滑的动态效果，提升用户体验。本文将探讨如何使用CSS transition和animation来改变渐变状态，以实现更具吸引力的视觉效果。 首先，...
css transition animation的使用（内含贝赛尔曲线详解）
12-09
CSS中的`transition`和`animation`是两种不同的动画机制，它们在网页动态效果设计中扮演着重要角色。`transition`，即过渡动画，主要用于当元素从一种状态改变到另一种状态时，平滑地过渡效果。这通常在用户交互时...
vue路由过渡动画
weixin_39168052的博客
08-01 945
<transition>标签 想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。 css过渡类名： 组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名： fade-enter:进入过...
vue中transition进场动画不生效，离开动画生效
cherrylovedog的博客
06-23 4414
如果想要在页面初始化时播放动画需要添加appear和appear-active-class 解决： 1.加appear <transition name="slide" appear></transition> 2 加v-if <transition name="slide" > <div class="detail" v-if="id"></div> </transition> ...
解决transition第一次不生效问题
OldStreet61的博客
01-07 2459
问题： transition第一次不生效，是因为需要设置left值，而自己设置的是right值
css transtion不生效_CSS中transition属性不起作用的原因及解决方法
weixin_34086545的博客
12-24 3432
CSS中的transition属性可用于调整元素更改的时间，它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果，但是有时候可能会出现无效的情况，所以我们就需要来理解transition属性的写法规则。我们先来看一下CSS中transition属性不起作用的原因transition是一种允许您指定更改时间等的属性。当用于设置鼠标光标放在按钮上时颜色和大小更改的时间时，它可以有...
transition 和 animation 的简单使用
神膘护体小月半的博客
07-06 390
transition 和 animation 的简单使用
css3 使用animation 只执行一次然后停留在执行后的状态
热门推荐
淡淡忧桑
04-24 6万+
-webkit-animation:'index' 5s ease-in-out 0 1 alternate forwards; forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 @-webkit-keyframes 'index'{    0%{   left:0%; }    50%{  left:50%;     }    100%{
css3 - 图标元素动画效果1 - 只执行一次动画
erdouzhang
05-08 1万+
在线演示鼠标指针滑过时，图标在1秒内匀速旋转360度。 使用transform属性来实现图标的旋转，并且设置transitio动画，将变化的属性名称设置为transform。所以我们看到图标的旋转效果。图标文件引入：<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">html：<div class="clo
关于css3 transition transform animation属性
小白努力走
01-08 1万+
1，transition属性 个人非常习惯用transition过度属性，简单易用。大家称他为animation简化版本。 例如： .contain{ width: 392px;  position: relative;  bottom: -20px;  opacity: 0;} .contain.on{  bottom: 0;  opacity: 1;  tra
关于transition过渡的详解
七的博客
06-01 8107
一、transition的作用 transition组件用于控制组件、元素的显示消失切换效果。 二、定义过渡类名 【初始状态】 v-enter 【过渡状态】 v-enter-active 【结束状态】 v-leave-to 【过渡状态】 v-leave-active /*初始状态*/ .animation-enter{ opacity:0; transtion:translateX(-400px) rotate(360deg); /* 初始状态： 透明度为0 div左
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值