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>

在谷歌与欧朋浏览器中显示不出渐进的过渡效果,很生硬,代码应该没有问题,在IE中能够正常显示,是什么原因导致的??急!!!

EugenioCode
浏览 1446回答 1
1回答

qq_风雨中坚强_0

这样可以实现你要写的效果<!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;               -webkit-transition:background 3s; /*在chroom google浏览器中使用*/               -moz-transition:background 3s; /*在firefox浏览器中使用*/            }            div:hover{                background-color: #f60;                width: 400px;                height: 400px;                transition-timing-function:ease;          -webkit-transition:all 5s ease;          -moz-transition:all 5s ease;          -o-transition:all 5s ease;            }        </style>    </head>    <body>        <h1>transition属性</h1>        <div></div>    </body></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3