前端基础学习之CSS3-过渡（transition）

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

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡

transition: 要过渡的属性花费时间运动曲线何时开始;
如果有多组属性变化，还是用逗号隔开：transition:width .4s ease 0s, height .4s;；
如果所有属性都是同样的变化，那么只需要用all 就可以了：transition:all .4s

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease” 。linear：线性过渡；ease：平滑过渡；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：由慢到快再到慢；step-start…更多取值可参考官方手册
transition-delay	规定过渡效果何时开始。默认是 0

demo:比如给一个div 一个宽度，鼠标移上变长变高。
没有给div过渡效果的展示结果：
在这里插入图片描述
给div加上transition过渡动画之后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      margin: 50px;
      width: 100px;
      height: 100px;
      background-color: pink;
      /*transition 写在本身上，谁需要做过渡动画，就写在谁身上*/
      /*过渡属性: 需要过渡的属性  过渡花费的时间  运动曲线  何时开始*/
      /*transition:width .4s ease 0s, height .4s;*/  
      transition:all .4s; /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */
    }
    div:hover{
      width: 800px;
      height: 300px;
    }
  </style>
</head>
<body>
    <div></div>
</body>
</html>

demo2- 京东图片小案例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		a{
			/*float: left;*/
			display: inline-block;
			width: 183px;
			height: 130px;
			margin: 50px 30px;
			overflow: hidden;
		}
		a img{
			width: 193px;
			height: 130px;
			transition: margin-left 0.3s;
		}
		a:hover img{
			margin-left: -10px;
		}
	</style>
</head>
<body>
	<a href="#"><img src="img/1.jpg" alt=""></a>
	<a href="#"><img src="img/2.jpg" alt=""></a>
	<a href="#"><img src="img/3.jpg" alt=""></a>
</body>
</html>

demo3- 京东侧边栏小案例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul{
			margin:100px 600px;
			width: 350px;
		}
	 	li{
	 		width: 50px;
	 		height: 50px;
	 		list-style: none;
	 		margin-bottom: 20px;
	 		background-color: pink;
	 		position: relative;
	 	}
	 	.d1{
	 		width: 0px;
	 		/*width: 300px;*/
	 		height: 50px;
	 		background-color: purple;
	 		position: absolute;
	 		right: 50px;
	 		top: 0;
	 		/*opacity: 0;*/
	 		transition:all 0.4s;
   			/*visibility: hidden;*/
	 	}
	 	li:hover .d1{
	 		/*visibility: visible;*/
	 		/*opacity: 1;*/
			width: 300px;
	 	}
	</style>
</head>
<body>
	<ul>
		<li><div class="d1"></div></li>
		<li><div class="d1"></div></li>
		<li><div class="d1"></div></li>
		<li><div class="d1"></div></li>
		<li><div class="d1"></div></li>
		<li><div class="d1"></div></li>
	</ul>
</body>
</html>

ps：demo3的侧边栏，我用opacity或者visibility来控制隐藏显示的时候，就没有了过渡的效果，而transition无法对一个从有到无的元素产生过渡效果，所以不能使用display能理解，但是opacity或者visibility都是占有位置的，不知道为什么也是无效。

前端基础学习之CSS3-过渡（transition）

猜你喜欢