码迷,mamicode.com
首页 > 其他好文 > 详细

transition动画

时间:2020-03-05 16:39:01      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:type   缓冲   min   height   border   bsp   UNC   width   set   

1.transition-property设置过度的属性,比如:width height background-color

2.transition-duration 设置 过度的时间  比如1S500MS

3.transition-timing-function设置 过度运动的方式,常用的有:linear(匀速)   ease(缓冲运动) 

4.transition-delay 设置动画的延迟

5.transition :property duration timing-function delay 同时设置四个属性

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition动画</title>
	<style>
		.box{
			width: 100px;
			height: 100px;
			background-color: skyblue;
			border: 2px solid darkred;
			margin:50px auto 0;
			transition: width 500ms linear,height 500ms linear 1s;
		}
		.box:hover{
			width: 600px;
			height: 400px;
			background-color: darkred;
			
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

  

transition动画

标签:type   缓冲   min   height   border   bsp   UNC   width   set   

原文地址:https://www.cnblogs.com/zijiang-4476/p/12420977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!