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

100人浏览 2024-11-18 10:46:25

题目及简易解析

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;
}
CSS复制代码

上面的案例中，其实定义了两个关键帧，一个是默认的宽度是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;/*属性分开写*/
CSS复制代码

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; //元素中调用
}

CSS复制代码

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

先说第一部分，声明动画类型，@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; }
}

CSS复制代码

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规则。