transition动画

Posted zijiang-4476

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transition动画相关的知识，希望对你有一定的参考价值。

1.transition-property设置过度的属性，比如：width height background-color

2.transition-duration 设置 过度的时间  比如1S500MS

3.transition-timing-function设置 过度运动的方式，常用的有：linear(匀速）   ease(缓冲运动） 

4.transition-delay 设置动画的延迟

5.transition :property duration timing-function delay 同时设置四个属性

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition动画</title>
	<style>
		.box{
			width: 100px;
			height: 100px;
			background-color: skyblue;
			border: 2px solid darkred;
			margin:50px auto 0;
			transition: width 500ms linear,height 500ms linear 1s;
		}
		.box:hover{
			width: 600px;
			height: 400px;
			background-color: darkred;
			
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

　　

以上是关于transition动画的主要内容，如果未能解决你的问题，请参考以下文章

vue3 之 Transition && 各种动画实现，一文让你会动画

css动画(transition/transform/animation)

为什么我的UIView.transition动画代码不会影响显示？

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画