下面是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为正方形的盒子变成圆形。
【提问】那这两个属性有什么本质上面的区别吗？
pardon110