CSS3变换、过渡、动画

最新推荐文章于 2024-10-26 23:17:15 发布

一条小码虫

最新推荐文章于 2024-10-26 23:17:15 发布

阅读量99

点赞数

文章标签： css3 媒体 css

本文链接：https://blog.csdn.net/xirunxiang369/article/details/129579335

版权

变换transform

如何使用transform

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(7deg);
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

旋转rotate

transform:rotate(7deg); 缩放比例角度

缩放scale

transform: scale(2, 2);	全体缩放
transform: scaleX(2);x轴缩放
transform: scaleY(2);y轴缩放

倾斜skew

transform: skew(45deg, 45deg);

位移translate

transform: translateX(45px);

矩阵matrix

transform: matrix(2, 2, 0, 2, 45, 0);

过渡transition

过渡属性property

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;

	transition-property:width,height;
	transition-duration:2s;

	/* Safari */
	-webkit-transition-property:width,height;
	-webkit-transition-duration:2s;
}

div:hover
{
	width:300px;
	height:300px;
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例不支持Internet Explorer 9以及更早版本的浏览器.</p>

<div></div>

<p>将鼠标移动至元素上查看过渡效果.</p>

</body>
</html>

注意，也可以是宽，高等一系列样式属性

持续时长duration

transition-duration:2s;
一般搭配着上面的transition-property 使用

延迟时间delay

transition-delay:2s;
/* Safari */
-webkit-transition-delay:2s;

动画类型linear，ease，ease-in，ease-out，ease-in-out

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	transition-timing-function:linear;
	/* Safari */
	-webkit-transition:width 2s;
	-webkit-transition-timing-function:linear;
}

div:hover
{
	width:300px;
}
</style>

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
描述
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

动画/帧动画animation

动画名称name + @keyframe

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {left:0px;}
	to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>

<div></div>

</body>

注意：也可以是颜色，这些样式的变化，比如背景色

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。阅读关于 initial的介绍。
inherit	从父元素继承属性。阅读关于 initinherital的介绍。