HTML-从零开始的学习过程（14）

最新推荐文章于 2022-10-24 01:05:23 发布

Dokey_L

最新推荐文章于 2022-10-24 01:05:23 发布

阅读量116

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Dokey_L/article/details/106801487

版权

CSS3过渡

过渡 – transition

控制css样式变化的过程，允许css属性值在一定的时间区间内平滑的过渡（动画形成的过程）。
兼容性：ie10+ 、 firefox16+ 、 chrome26+ 、safari6.1+ 、opera12.1+；

transition-property属性

检索或者设置对象中的参与过渡的属性；
语法：none | all | property；
none 没有属性变化
all 所有属性都会改变 – 默认值
property 元素属性名

transition-duration属性

检索或者设置对象过渡的持续时间
语法： time
参数说明：
规定完成或者效果完成所需要的花费的时间（s /ms）；
默认值：0；

transition-timing-function属性
检索或者设置对象中的过渡的动画效果。
语法：transition-timing-function：

ease 平滑过渡等同于贝塞尔曲线(0.25，0.1，0.25，1.0),开头和结尾比较平滑，但是最后相对较快;
linear 线性过渡 – 等同于贝塞尔曲线(0.0，0.0，1.0，1.0),突然开始，中间匀速得，再次突然停止;
ease-in 由慢到快;
ease-out 由快到慢;
ease-in-out 慢-快-慢;
step-start 一帧一帧设置;
step-end;
step< angle>[start | end]

transition-delay属性

检索或者设置对象延迟过渡的时间 – 过渡的属性是立刻执行还是延迟执行
语法：transition-delay:time
参数说明：
指定秒或者毫秒之前等待效果的开始
默认值0 – 不延迟，立即执行

transition复合属性
语法;：transition：property duration timing-function delay；

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 80px;
			margin: 200px auto;
			background-color: #abcdef;
			text-align: center;
			line-height: 80px;
			font-weight: bold;
			font-size: 20px;
			/*transform: rotate(0deg) ;*/
			transition: transform 2s ease-in-out ;
		}
		div:hover{
			transform: rotate(360deg) scale(2);
			transition: transform 2s ease-in-out ;
		}
	</style>
</head>
<body>
	<div>transition</div>
</body>
</html>

Dokey_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-从零开始的学习过程（14）

CSS3过渡过渡 – transition控制css样式变化的过程，允许css属性值在一定的时间区间内平滑的过渡（动画形成的过程）。兼容性：ie10+ 、 firefox16+ 、 chrome26+ 、safari6.1+ 、opera12.1+；transition-property属性检索或者设置对象中的参与过渡的属性；语法：none | all | property；none 没有属性变化all 所有属性都会改变 – 默认值property 元素属
复制链接

扫一扫