transition屬性異常
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>transition屬性</title>
<style?type="text/css">
div{
width:?200px;
height:?200px;
background-color:?green;
transition:all?1s?linear?0;
????????????????-moz-transition:all?1s?linear?0;?/*?Firefox?4?*/
????????????????-webkit-transition:all?1s?linear?0?;?/*?Safari?和?Chrome?*/
????????????????-o-transition:all?1s?linear?0;
}
div:hover{
background-color:?#f60;
width:?400px;
height:?400px;
}
</style>
</head>
<body>
<h1>transition屬性</h1>
<div></div>
</body>
</html>在谷歌與歐朋瀏覽器中顯示異常，動(dòng)畫漸進(jìn)效果沒有正常顯示 在IE瀏覽器中可以顯示，這是什么原因?qū)е碌模保。。?br />
2016-04-17
你使用transition:屬性1 時(shí)間，屬性2 時(shí)間，屬性3 時(shí)間；這種方式，我剛試過，可以的。我把代碼給你。
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>transition屬性</title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? div{
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? ? background-color: green;
? ? ? ? ? ? ? ? transition:width 2s linear,height 2s linear,background-color 2s linear;
? ? ? ? ? ? ? ? -moz-transition:width 2s linear,height 2s linear,background-color 2s linear; /* Firefox 4?
*/
? ? ? ? ? ? ? ? -webkit-transition:width 2s linear,height 2s linear,background-color 2s linear; /* Safari?
和 Chrome */
? ? ? ? ? ? ? ? -o-transition:width 2s linear,height 2s linear,background-color 2s linear;
?
? ? ? ? ? ? }
? ? ? ? ? ? div:hover{
? ? ? ? ? ? ? ? background-color: #f60;
? ? ? ? ? ? ? ? width: 400px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <h1>transition屬性</h1>
? ? ? ? <div></div>
? ? </body>
</html>