transtion详解

最新推荐文章于 2022-03-23 22:03:48 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-03-23 22:03:48 发布

阅读量3k

点赞数 1

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/108654031

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		/*div
		{
			width: 100px;
			height: 50px;
			background-color: red;
			transition-property: width;
			transition-duration: 5s;
			  /*告诉系统延迟多少秒之后才开始过渡动画*/
		/*	  transition-delay: 2s;
		}
		div:hover
		{
			width: 300px;
		}
		*/
		ul
		{
			width: 800px;
			height: 500px;
			margin: 0 auto;
			background-color: red;
			border: 1px solid yellow;
		}
		ul li
		{
			list-style: none;
			width: 100px;
			height: 50px;
			margin-top: 50px;
			background-color: blue;
			transition-property: margin-left;
			transition-duration: 1s;
		}
		ul:hover li
		{
			margin-left: 700px;
		}
		ul li:nth-child(1)
		{
			/*告诉系统过渡动画的运动的速度*/
			transition-timing-function:linear;
		}
		ul li:nth-child(2)
		{
			transition-timing-function: ease;
		}
		 ul li:nth-child(3){
            transition-timing-function: ease-in;
        }
        ul li:nth-child(4){
            transition-timing-function: ease-out;
        }
        ul li:nth-child(5){
            transition-timing-function: ease-in-out;
        }
	</style>
</head>
<body>
<!--<div></div>-->
<ul>
    <li>linear</li>
    <li>ease</li>
    <li>ease-in</li>
    <li>ease-out</li>
    <li>ease-in-out</li>
</ul>
</body>
</html>