技术

前端面试-css中transition和animate有何区别?

微信扫一扫,分享到朋友圈

前端面试-css中transition和animate有何区别?
0 0

题目及简易解析

css中transition和animate有何区别?animate如何停留在最后一帧?

Transition是css中检测指定属性变化进行自动补间动画的属性。

Animate是先指定好动画过程中的关键帧属性,进行动画的属性。

在animate动画中 animation-fill-mode:forwards 是动画完成后,保持自最后一个属性。

下面我们详细解读下这些属性的应用。

Transition 过渡

Transition的翻译是 过渡 ,从字面理解其实也是动画的一种,只是它关注的点相对比较简单。对于指定的属性在发生变化的时候,浏览器自动按照指定的时间进行自然的过渡。先来个案例

{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s; //在这里
}

div:hover
{
	width:300px;
}

上面的案例中,其实定义了两个关键帧,一个是默认的宽度是100px,鼠标经过的时候,宽度会变成300px。在传统的情况下,其实是个很直白的变化。鼠标经过直接变更。 而增加transiton属性之后,等于会检测width的变化,并且变化执行过渡的时间是 2秒。这使得width的变化变得很丝滑。

transition的属性有以下4个

  • transition-property 需要过渡的属性,不是每个属性都能过渡的
  • transition-duration 指定从一个属性到另一个属性过渡所要花费的时间。默认值为0,为0时,表示变化是瞬时的,看不到过渡效果。
  • transiton-timing-function 就是过渡的动画类型。可用的类型有liner(匀速)、ease-in(减速)、ease-out(加速)ease-in-out(先加速再减速)、cubic-bezier:三次贝塞尔曲线,可以定制
  • transition-delay 指定检测到过渡行为之后延迟一定时间后才开始进行执行。

写法分开合起来写都可以

transition: height 1s; //通常用法,属性和时间

//过渡时间、延迟时间、属性、类型
transition: 1s 1s height ease;

//或者分开写
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;/*属性分开写*/


transition所有的运行都需要条件进行触发。比如:hover、:focus、:checked或者js操作css样式的变更等等。

以上造成的transiton的优点就是简单易用,方便就有局限性

  • transition需要事件触发,所以没法在网页加载时自动发生。
  • transition是一次性的,不能重复发生,除非一再触发。
  • transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
  • 一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

针对上述问题,就有了复杂的animation了。

Animation 动画

CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。要实现animation动画,就需要定义动画类型,并且在样式中调用。先上案例

@keyframes mymove  //动画关键帧定义
{
	from {left:0px;}
	to {left:200px;}
}

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;  //元素中调用
}

实际运行起来的之后,默认就开始了运行。不需要其他的出发条件。

先说第一部分,声明动画类型,@keyframes。参照上面案例,@keyframes后面跟上定义动画的名称,里面是每个节点上的属性变化。主要是用百分比,比如0%、20%、50%、100%等。其中0%和100%可以用from和to代替,并且不能缺少。

div:hover {
  animation: 1s changeColor;  
}

@-webkit-keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

animation在调用的时候,也有很多属性。

  • animation-name 动画类型,也就是@keyframes定义的动画
  • animation-duration 指定一个周期需要的时间。
  • animation-timing-function 速度曲线,和transition-timing-function一样,可用的类型有liner(匀速)、ease-in(减速)、ease-out(加速)ease-in-out(先加速再减速)、cubic-bezier:三次贝塞尔曲线,可以定制
  • animation-delay 延迟时间
  • animation-iteration-count 播放的次数、默认1
  • animation-direction 默认为nomal,每次循环都是向前播放,(0-100),另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放
  • animation-state:默认为running,播放,paused,暂停
  • animation-fill-mode:定义动画开始之前和结束之后发生的操作,默认值为none,动画结束时回到动画没开始时的状态;forwards,动画结束后继续应用最后关键帧的位置,即保存在结束状态;backwards,让动画回到第一帧的状态;both:轮流应用forwards和backwards规则。

文末

animation属性类似于transition,他们都是随着时间改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。

半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

Vue进阶篇-服务器端渲染SSR

上一篇

喜的是爱一个人,恨的是爱而不得

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      前端面试-css中transition和animate有何区别?

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫