css3 transition transfrom translate animate 有什么区别？

好像都是动的、、、有什么区别和联系？... 好像都是动的、、、有什么区别和联系？展开

 我来答

3个回答

#热议# 在购买新能源车时，要注意哪些？

慎重还可靠灬宝贝f
推荐于2016-07-20 · TA获得超过12.9万个赞

知道大有可为答主

回答量：1.9万

采纳率：52%

帮助的人：2629万

我也去答题访问个人页

关注

展开全部

　　transition, transform, tanslate,animation分别为过渡，变换，平移、动画。transform的属性包括：rotate() / skew() / scale() / translate(,) 。

　　transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
　　为了更好地理解 transform 属性，请查看这个演示。

　　默认值：none

　　继承性：no

　　版本：CSS3

　　JavaScript 语法：object.style.transform="rotate(7deg)"

　　语法
　　transform: none|transform-functions;

　　值描述

　　none 定义不进行转换。
　　matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
　　matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
　　translate(x,y) 定义 2D 转换。
　　translate3d(x,y,z) 定义 3D 转换。
　　translateX(x) 定义转换，只是用 X 轴的值。
　　translateY(y) 定义转换，只是用 Y 轴的值。
　　translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
　　scale(x,y) 定义 2D 缩放转换。
　　scale3d(x,y,z) 定义 3D 缩放转换。
　　scaleX(x) 通过设置 X 轴的值来定义缩放转换。
　　scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
　　scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
　　rotate(angle) 定义 2D 旋转，在参数中规定角度。
　　rotate3d(x,y,z,angle) 定义 3D 旋转。
　　rotateX(angle) 定义沿着 X 轴的 3D 旋转。
　　rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
　　rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
　　skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
　　skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
　　skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
　　perspective(n) 为 3D 转换元素定义透视视图。
　　

已赞过 已踩过<

评论收起

济南市历城区墨星儿机械..

广告2024-12-25

专业工业品一站式采购服务平台，欢迎咨询采购价格型号品牌图片

www.wejianzhan.com

hahazaixian6a
推荐于2018-03-07 · TA获得超过1295个赞

知道小有建树答主

回答量：1265

采纳率：100%

帮助的人：706万

我也去答题访问个人页

关注

展开全部

具体可以参考css.doyoe.com 这个手册有详细介绍

transition 是过渡

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>transition_CSS参考手册_web前端开发参考手册系列</title>

<style>
h1{font-size:16px;}
.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
.test li{float:left;width:100px;height:100px;margin:0 5px;border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:background-color .5s ease-in;-webkit-transition:background-color .5s ease-in;-o-transition:background-color .5s ease-in;-ms-transition:background-color .5s ease-in;transition:background-color .5s ease-in;}
.test li:nth-child(1):hover{background-color:#bbb;}
.test li:nth-child(2):hover{background-color:#999;}
.test li:nth-child(3):hover{background-color:#630;}
.test li:nth-child(4):hover{background-color:#090;}
.test li:nth-child(5):hover{background-color:#f00;}
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<ul class="test">
	<li>背景色过渡</li>
	<li>背景色过渡</li>
	<li>背景色过渡</li>
	<li>背景色过渡</li>
	<li>背景色过渡</li>
</ul>
</body>
</html>

transfrom 是变换

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>2D transform_CSS参考手册_web前端开发参考手册系列</title>

<style>
h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}
.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}
.test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}
.test li p{width:300px;height:100px;margin:0;background:#ddd;}
.test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}
.test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}
.test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
.test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
.test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
.test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
.test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
.test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
.test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
.test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
.test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}
</style>
</head>
<body>
<h1>矩阵变换：matrix()</h1>
<ul class="test">
	<li class="matrix">
		<p>transform:matrix(0,1,1,1,10,10)</p>
	</li>
</ul>
<h1>平移：translate(), translateX(), translateY()</h1>
<ul class="test">
	<li class="translate">
		<p>transform:translate(5%,10px)</p>
	</li>
	<li class="translate2">
		<p>transform:translate(-10px,-10px)</p>
	</li>
	<li class="translateX">
		<p>transform:translateX(20px)</p>
	</li>
	<li class="translate3">
		<p>transform:translate(20px)</p>
	</li>
	<li class="translateY">
		<p>transform:translateY(10px)</p>
	</li>
	<li class="translate4">
		<p>transform:translate(0,10px)</p>
	</li>
</ul>
<h1>旋转：rotate()</h1>
<ul class="test">
	<li class="rotate">
		<p>transform:rotate(-15deg)</p>
	</li>
	<li class="rotate2">
		<p>transform:rotate(15deg)</p>
	</li>
</ul>
<h1>缩放：scale()</h1>
<ul class="test">
	<li class="scale">
		<p>transform:scale(.8)</p>
	</li>
	<li class="scale2">
		<p>transform:scale(1.2)</p>
	</li>
</ul>
<h1>扭曲：skew()</h1>
<ul class="test">
	<li class="skew">
		<p>transform:skew(-5deg)</p>
	</li>
	<li class="skew2">
		<p>transform:skew(-5deg,-5deg)</p>
	</li>
</ul>
</body>
</html>

animate 是动画

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>animation_CSS参考手册_web前端开发参考手册系列</title>

<style>
div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px 0 0 -150px;border:3px solid #eee;background:#e0e0e0;}
span{opacity:0;display:block;height:50px;font:bold 14px/50px Georgia;}
.a1{
	-webkit-transform:translate(60px);
	-webkit-animation:animations 2s ease-out;
	-moz-transform:translate(55px);
	-moz-animation:animations 2s ease-out;
	-o-transform:translate(55px);
	-o-animation:animations 2s ease-out;
	-ms-transform:translate(55px);
	-ms-animation:animations 2s ease-out;
	transform:translate(55px);
	animation:animations 2s ease-out;
}
@-webkit-keyframes animations{
	0%{-webkit-transform:translate(0);opacity:0;}
	50%{-webkit-transform:translate(30px);opacity:1;}
	70%{-webkit-transform:translate(35px);opacity:1;}
	100%{-webkit-transform:translate(60px);opacity:0;}
}
@-moz-keyframes animations{
	0%{-moz-transform:translate(0);opacity:0;}
	50%{-moz-transform:translate(30px);opacity:1;}
	70%{-moz-transform:translate(35px);opacity:1;}
	100%{-moz-transform:translate(60px);opacity:0;}
}
@-o-keyframes animations{
	0%{-o-transform:translate(0);opacity:0;}
	50%{-o-transform:translate(30px);opacity:1;}
	70%{-o-transform:translate(35px);opacity:1;}
	100%{-o-transform:translate(60px);opacity:0;}
}
@-ms-keyframes animations{
	0%{-ms-transform:translate(0);opacity:0;}
	50%{-ms-transform:translate(30px);opacity:1;}
	70%{-ms-transform:translate(35px);opacity:1;}
	100%{-ms-transform:translate(60px);opacity:0;}
}
@keyframes animations{
	0%{transform:translate(0);opacity:0;}
	50%{transform:translate(30px);opacity:1;}
	70%{transform:translate(35px);opacity:1;}
	100%{transform:translate(60px);opacity:0;}
}
.a3{
	-webkit-transform:translate(100px);
	-webkit-animation:animations3 2s ease-out 2s;
	-moz-transform:translate(100px);
	-moz-animation:animations3 2s ease-out 2s;
	-o-transform:translate(100px);
	-o-animation:animations3 2s ease-out 2s;
	-ms-transform:translate(100px);
	-ms-animation:animations3 2s ease-out 2s;
	transform:translate(100px);
	animation:animations3 2s ease-out 2s;
}
@-webkit-keyframes animations3{
	0%{-webkit-transform:translate(160px);opacity:0;}
	50%{-webkit-transform:translate(130px);opacity:1;}
	70%{-webkit-transform:translate(125px);opacity:1;}
	100%{-webkit-transform:translate(100px);opacity:0;}
}
@-moz-keyframes animations3{
	0%{-moz-transform:translate(160px);opacity:0;}
	50%{-moz-transform:translate(130px);opacity:1;}
	70%{-moz-transform:translate(125px);opacity:1;}
	100%{-moz-transform:translate(100px);opacity:0;}
}
@-o-keyframes animations3{
	0%{-o-transform:translate(160px);opacity:0;}
	50%{-o-transform:translate(130px);opacity:1;}
	70%{-o-transform:translate(125px);opacity:1;}
	100%{-o-transform:translate(100px);opacity:0;}
}
@-ms-keyframes animations3{
	0%{-ms-transform:translate(160px);opacity:0;}
	50%{-ms-transform:translate(130px);opacity:1;}
	70%{-ms-transform:translate(125px);opacity:1;}
	100%{-ms-transform:translate(100px);opacity:0;}
}
@keyframes animations3{
	0%{transform:translate(160px);opacity:0;}
	50%{transform:translate(130px);opacity:1;}
	70%{transform:translate(125px);opacity:1;}
	100%{transform:translate(100px);opacity:0;}
}
.a2{
	text-align:center;font-size:26px;
	-webkit-animation:animations2 5s ease-in-out 4s;
	-moz-animation:animations2 5s ease-in-out 4s;
	-o-animation:animations2 5s ease-in-out 4s;
	-ms-animation:animations2 5s ease-in-out 4s;
	animation:animations2 5s ease-in-out 4s;
}
@-webkit-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@-moz-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@-o-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@-ms-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
</style>
</head>
<body>
<div>
	<span class="a1">CSS3 Animations</span>
	<span class="a2">CSS3 Animations</span>
	<span class="a3">CSS3 Animations</span>
</div>
</body>
</html>

本回答被网友采纳

已赞过 已踩过<

评论收起

jack观天下
2014-10-16 · 带你看天下趣闻，有意思的视频！

jack观天下

采纳数：832 获赞数：3143

向TA提问私信TA

关注

展开全部

hahazaixian写的很详细，具体自己试一下就知道区别了

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

超级码客~2025版海量Javascript面试题+笔试题&答案

精编javascript 笔试题Web前端工程师面试#H5，CSS3，JavaScript，Vue，JQuery，Redux，WebpackBootstrap，TypeScript，微信小程序核心题集超3500题，一站式面试服务javascript 笔试题

www.chaojimake.cn广告

原装正品trimble—代理经销商

专业工业品一站式采购服务平台，欢迎咨询采购价格型号品牌图片

www.wejianzhan.com广告

css3 transition transfrom translate animate 有什么区别？

您可能关注的内容

其他类似问题

为你推荐：