首页 > 其他分享> > CSS3-过渡transition

CSS3-过渡transition

2021-12-26 10:04:37 作者：互联网

1. 简介
2. 语法格式
3. 案例

1. 简介

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用。

2. 语法格式

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

属性

属性就是你想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。

花费时间

transition-duration 花费时间单位是秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线默认是 ease

运动曲线示意图：

何时开始

默认是 0s 鼠标触发就立即开始可以设置延迟触发时间

3. 案例

<head>
    <style>
    	div {
			width: 400px;
			height: 150px;
			background-color: pink;
			/* 
            	1. 如果有多组属性，我们用逗号隔开
            	2. transtion过渡写在实现该过度的盒子本身上
            	3. all 所有属性都会变化， 后面俩个属性可以省略 
            */
			/*transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;*/
            transition: all 0.5s;
		}
        
		div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */
			width: 800px;
			height: 250px;
			background-color: purple;
		}
    </style>
</head>
<body>
    <div></div>
</body>

效果：

常见效果：

按钮变换底色图片移动小米效果（阴影效果）导航栏效果等等

标签：CSS3,0s,效果,ease,transition,过渡,属性
来源： https://www.cnblogs.com/gh-StudyNotes/p/15732293.html