CSS动画与过渡的区别

最新推荐文章于 2024-05-19 19:26:56 发布

Stirve unremitting

最新推荐文章于 2024-05-19 19:26:56 发布

阅读量104

点赞数

分类专栏：笔记文章标签： css3

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104931075

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			2d:
				transition:skew();倾斜
				
			3d:
				区别于2d的地方,3d有近大远小
				景深:
					perspective:; 元素视线的距离,一般在父元素中使用
					900px-1200px
					
				事物的观察点:
					perspective-origin:;
						center left right top bottom
						% px
						
				3d的场景:
					transform-style:;
						flat	默认值,是呈现在2d场景中
						preserve-3d	呈现在3d中
					
					3d位移
					3d旋转
					3d缩放
					注: 比2d多一个z轴
					
			css3动画
				1: 定义一个动画过程
					1) 
					@keyframes mz{
						from{初始状态}
						to{结束状态}
					}
					
					2)
					@keyframes mz{
						0%{初始状态}
						...
						100%{结束状态}
					}
					
					
				2: 给对应的元素调用
					animation:动画名字 运动时间 运动的类型 动画延迟时间 动画是否循环 运动的方向;
					animation-name:;
					animation-duration:;
					animation-timing-function:;
					animation-delay:;
					animation-iteration-count:;
					animation-direction:;
					
				鼠标移入时暂停:
					animation-play-state:;
					
				animation 和 transition的对比:
					相同点: 都是随着时间的改变而改变元素的属性值
					不同点: transition需要触发一个时间才会引起元素属性的改变
						animation不需要任何事件触发也可以完成元素随着时间的变化而改变属性
					
			添加:
				background:rgba(红,绿,蓝,透明);
					透明取值范围 0-1
					
				border-radius:圆角;
				
				backface-visibility:hidden;	背面不可见
				
				选择器:target{}	关联目标元素
			
		-->
		持续更新中喜欢的可以继续关注本人博客！！！！
	</body>
</html>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画与过渡的区别

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 2d: transition:skew();倾斜 3d: 区别于...
复制链接

扫一扫