CSS-过渡效果-transition-优快云博客

本文链接：https://blog.youkuaiyun.com/JSWANGCHANG/article/details/100832541

1，什么是过渡效果
   使得CSS的属性值在一段时间内平缓变化的一个效果
   例如颜色的渐变式变化是突变还是渐变，
       字体大小变化，位置变化等
2，语法
   1，指定过渡属性
       作用：指定哪个属性值在变化的时候使用过渡效果；
       属性：transition-property   (过渡属性)
       取值：
           1，属性名称
           2， all
               但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现
               允许使用过渡效果的属性：
                   1，所有与颜色相关的属性
                   2，所有取值为数字的属性
               eg:
                   transition-property:background-color;
   2，指定过渡时长
       作用：指定在多长时间内完成过渡效果
       属性： transition-duration
       取值：以s或ms为单位的数字
       eg:
           transition-duration:0.3s;
   3，指定过渡的速度时间曲线函数
       作用：指定过渡效果变化速率
       属性：transition-timing-function
       取值：
           1， ease
               默认值，慢速开始，快速变快，慢速结束
           2， linear
               匀速
           3， ease-in
               慢速开始，加速结束
           4, ease-out
               快速开始，减速结束
           5， ease-in-out
               慢速开始和结束，中间先加速后减速
   4，指定过渡延迟
       作用：当激发过渡效果后，等待多长时间再开始操作
       取值： s或ms为单位的数字


   5，过渡属性简写
       属性： transition
       取值： property duration timing-fun delay
       eg:
           transition: color 5s linear, font-size 3s linear;

练习: 200*200 red渐变为 400*400 yellow

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		#d1{
			width:200px;
			height:200px;
			background:red;
			/* 设置过渡属性 */	
			transition-property:all;
			/*设置过渡时长 */
			transition-duration:5s;
			/* 过渡变化速率 */
			transition-timing-function:linear;
			/* 过渡延时1s */
			transition-delay:0.5s;
		}
		#d1:hover{
			width:400px;
			height:400px;
			background-color:yellow;
			/* 变为圆形 */
			border-radius: 50%;
		}
	</style>
 </head>
 <body>
	<div id="d1"></div>
 </body>
</html>