CSS3动画里的过渡效果

2022-02-18 04:43:43

过渡效果中有：

1平滑效果

2线性过渡

3由慢到快

4由快到慢

5慢-快-慢等等具体参考 w3chool

例如：

<body>

　　　　<div class="out">

　　　　　　<div class="inner1">线性过渡</div>

　　　　　　<div class="inner3">由慢到快</div>

　　　　　　<div class="inner4">由快到慢</div>

　　　　　　<div class="inner2">平滑过渡</div>

　　　　　　<div class="inner5">由慢到快再到慢</div>

　　　　</div>

</body>

CSS:

.out {
	width: 800px;
	padding: 1px;
	background-color: #999999;
	}

	.out div {
	width: 100px;
	height: 100px;
	margin: 25px;
	background-color: #21bbca;
	font-size: 12px;
	text-align: center;
	line-height: 100px;
	}

	.inner1 {
	-webkit-transition: all 4s linear;
	}
	.inner2 {
	-webkit-transition: all 4s ease;
	}
	.inner3 {
	-webkit-transition: all 4s ease-in;
	}
	.inner4 {
	-webkit-transition: all 4s ease-out;
	}
	.inner5 {
	-webkit-transition: all 4s ease-in-out;
	}

	.out:hover div {
	margin-left: 75%;
	-webkit-transform: rotate(360deg);
	border-radius: 50%;
	}