transition和animation的区别

最新推荐文章于 2023-10-07 17:44:46 发布

歪头独角兽

最新推荐文章于 2023-10-07 17:44:46 发布

阅读量249

点赞数

分类专栏： css3 文章标签： css3 前端

本文链接：https://blog.csdn.net/Q_Q420427/article/details/90418565

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

transition

需要一个事件来触发，比如hover，所以没法在网页加载时自动触发。
是一次性的，不能重复发生，除非一再触发。
只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title></title> 
<style> 
#transition{
  width:100px;
  height:100px;
  background:blue;
  cursor: pointer;
  transition:width 2s;
}
#transition:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="transition"></div>
</body>
</html>

通过transition属性监听div元素width属性的变化，动画在两秒内完成。当鼠标悬浮于div之上的时候，设置width的宽度500px，宽度的变化此时被transition监听到。于是开始动画效果，宽度会进行平滑的过渡。

animation

animation可以通过keyframes显式控制当前帧的属性值，而transition只能隐式来进行（不能指定每帧的属性值），所以相对而言animation的功能更加灵活。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title></title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  top:100px;
  animation:move 4s infinite alternate;
}
@keyframes move{
  0%{left:0px;background:red;}
  25%{left:30px;background:blue;}
  50%{left:60px;background:yellow;}
  75%{left:120px;background:green;}
  100%{left:240px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

一次完整的动画时长是4秒。通过@keyframes属性将动画整个时长分为4份，在各自的时间段对动画进行控制。也就是说animation动画可以具有多个状态，但是transtion动画只有两个状态，起始状态与结束状态。

transition和animation的区别

动画状态的区别
animation动画可以通过@keyframes属性对动画进行更为精细的控制，设置多个状态。但是transition属性则只有两个状态，起始状态与结束状态。
触发条件不同
transitiontransition需要触发一个事件才能改变属性，而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

歪头独角兽

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
transition和animation的区别

transition需要一个事件来触发，比如hover，所以没法在网页加载时自动触发。是一次性的，不能重复发生，除非一再触发。只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta ...
复制链接

扫一扫