首页 > html > transition > Animation - 如何使用transition为不同的属性动画不同的持续时间

Animation - 如何使用transition为不同的属性动画不同的持续时间

transition 【transition】
我们想知道如何使用transition为不同的属性动画不同的持续时间。
代码展示 运行结果 

<!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>