CSS3变换、过渡、动画

变换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>

语法: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

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的介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值