CSS3中的animation和transition的区别？

下面是animation动画效果的使用例子：

@keyframes changeColor {
  from {
    border-radius: 0;  
    } 
    to {    
    border-radius: 100%;  
    }
}
   div {  
   width: 200px;  
   height: 200px;  
   background: red;  
   text-align:center;  
   margin: 20px auto;  
   line-height: 200px;  
   color: #fff;
   }
   div:hover {  
   animation-name: changeColor;  
   animation-duration: 5s;  
   animation-timing-function: ease-out;  
   animation-delay: .1s;
   }

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div>Hover Me</div></body></html>

下面是transition过度函数的使用例子：

div {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
 
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function:linear;
  transition-timing-function:linear;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 100%;
}

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div></div></body></html>

上述的两个例子，都是鼠标滑过，使div为正方形的盒子变成圆形。

【提问】那这两个属性有什么本质上面的区别吗？

慕容818178

浏览 1990回答 1

1回答

pardon110

本质上来说没有。动画更强调是连续性，主是一个图形在单位时间内的变化。而transition可比animation强大多了，它涉及到矩阵变换，css空间坐标系，线性关系等。简单来说，animation是transition的简化版。

0 0

随时随地看视频慕课网APP