CSS3的过度属性属性 transition

最新推荐文章于 2022-11-12 12:12:11 发布

放羊的狗

最新推荐文章于 2022-11-12 12:12:11 发布

阅读量1.5k

点赞数 1

文章标签： CSS3 过渡元素 transition属性

本文链接：https://blog.csdn.net/Lazy_ass/article/details/100534755

版权

transition属性是一个简写属性，用于在属性中设置四个过渡属性
transition包含的四个过渡属性
书写格式：transition:height ease 2s 3s ,width ease-in 3s 2s; 以逗号隔开

transition-property：需要过渡的属性名称值有 none all 属性名列表实例：

<style>
		div{
			transition-property:  width ,height;  /*宽和高都需要过渡；属性名称以逗号隔开*/
			transition-duration: 3s;      /*过渡需要多长时间完成*/
			height: 100px;
			width:100px;
			background-color:red;
		}
		div：hover{
			width:300px;
			height:300px;
			background-color:blue;
		}
</style>
<body>
	<div>这是一个盒子，可变长短还不快来试试</div>
</body>

Safari浏览器支持替代的-webkit-transition-property属性 IE9以及更早的浏览器不支持该属性

2.transition-duration属性：定义完成过渡需要多长时间属性值：time s（秒）ms（毫秒）该属性不可以为零；否则就没有效果
Safari浏览器支持-webkit-transition-duration属性 IE9以及更早的浏览器不支持该属性

3.transition-timing-function属性：该属性是定义过渡过程的速度曲线
属性值有：
linear（相同速度开始至结束）
ease（蛮速度开始，然后变快，然后慢结束过渡效果）
ease-in：慢速度开始的过渡效果
ease-out：慢速度结束的过渡效果
ease-in-out：以慢速开始和结束的过渡效果
cubic-bezier（n,n,n,n）:0-1之间的数值来进行定义速度
这四个值前两个为一个坐标和（0.0）构成曲线的切线；后两个为一个坐标和（1,1）构成曲线的切线；X轴为时间；Y轴为移动的距离百分比（参考贝塞尔曲线）特点：第一个坐标越高速度越快；第二个坐标越低速度越快

4.transition-delay属性：过渡效果等待几秒在开始移动（值为s或者ms）如果为负值则和transition-duration的值相加

/—文章是学习记得笔记‘；如有误请留言指出—/