下面是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 關注
- 1884 瀏覽
添加回答
舉報
0/150
提交
取消