下面是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为正方形的盒子变成圆形。【提问】那这两个属性有什么本质上面的区别吗？
1 回答
pardon110
TA贡献1038条经验 获得超227个赞
本质上来说没有。动画更强调是连续性，主是一个图形在单位时间内的变化。而transition可比animation强大多了，它涉及到矩阵变换，css空间坐标系，线性关系等。简单来说，animation是transition的简化版。
- 1 回答
- 0 关注
- 1698 浏览
添加回答
举报
0/150
提交
取消