css3的transition属性

最新推荐文章于 2021-06-07 17:45:40 发布

sun-shadow

最新推荐文章于 2021-06-07 17:45:40 发布

阅读量579

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/u013494746/article/details/39204223

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

transition的意思为过渡，渐变。可以用来实现一些简单的动画效果。

transition:property duration timing-function delay;

四个参数分别表示：property（属性：包括宽，高，透明度等css属性），duration（持续时间），timing-function（速度曲线），delay（延迟）。

以下是一个div透明度从1到0的渐变过程。

<html>
	<head>
		<style>
		div{
		width:100px;
		height:100px;
		opacity:1;
		background:blue;
		transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
		-moz-transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
		-webkit-transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
		-o-transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
		}
		div:hover{opacity:0;}
		</style>
	</head>
	<body>
	<div ></div>
</body>
</html>

transition是一个简写属性，用于设置过4个过渡属性。

transition-property：none|all|property 过滤效果的css属性
transition-duration：time 完成过渡效果所费时间
transition-timing-function：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); 速度曲线
transition-delay：time 定义过渡何时开始

transition-timing-function：linear（匀速），ease：慢，快，慢，ease-in：慢开始，ease-out：慢结束，ease-in-out：慢开始和结束，cubic-bezuer(n,n,n,n),自定义贝塞尔曲线。