App下載
首頁 > html > transition > Animation - 如何使用transition為不同的屬性動畫不同的持續(xù)時間

Animation - 如何使用transition為不同的屬性動畫不同的持續(xù)時間

我們想知道如何使用transition為不同的屬性動畫不同的持續(xù)時間。 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div#bounce {
  width: 200px;
  height: 200px;
  background-color: red;
  -webkit-transition-duration: 50ms, 200ms;
  -webkit-transition-property: margin, background;
  -webkit-transition-timing-function: ease;
}

div#bounce:hover {
  background-color: green;
  margin-top: 25px;
}
</style>
</head>
<body>
  <div id="bounce"></div>
</body>
</html>