下面是animation動(dòng)畫(huà)效果的使用例子：@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>變形與動(dòng)畫(huà)</title>
<link?href="style.css"?rel="stylesheet"?type="text/css">
</head>?
<body>
<div>Hover?Me</div></body></html>下面是transition過(guò)度函數(shù)的使用例子：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>變形與動(dòng)畫(huà)</title>
<link?href="style.css"?rel="stylesheet"?type="text/css">
</head>?
<body>
<div></div></body></html>上述的兩個(gè)例子，都是鼠標(biāo)滑過(guò)，使div為正方形的盒子變成圓形?！咎釂?wèn)】那這兩個(gè)屬性有什么本質(zhì)上面的區(qū)別嗎？
1 回答
pardon110
TA貢獻(xiàn)1038條經(jīng)驗(yàn) 獲得超227個(gè)贊
本質(zhì)上來(lái)說(shuō)沒(méi)有。動(dòng)畫(huà)更強(qiáng)調(diào)是連續(xù)性，主是一個(gè)圖形在單位時(shí)間內(nèi)的變化。而transition可比animation強(qiáng)大多了，它涉及到矩陣變換，css空間坐標(biāo)系，線性關(guān)系等。簡(jiǎn)單來(lái)說(shuō)，animation是transition的簡(jiǎn)化版。
-
慕容818178矩陣變換、空間坐標(biāo)、線性關(guān)系，這些不是transform嗎。transition跟他有什么關(guān)系嗎。transition的屬性不是：transition-property、transition-durantion、transition-timing-function、transtion-delay這些嘛 -
cheryl_transition 是過(guò)渡， animation 是動(dòng)畫(huà)。animation的功能比transition要多。 -
無(wú)幻覺(jué)明顯animation功能強(qiáng)啊。
- 1 回答
- 0 關(guān)注
- 1865 瀏覽
添加回答
舉報(bào)
0/150
提交
取消