css3 transform transition translate animatiion 区别

最新推荐文章于 2024-07-11 16:15:52 发布

sixtomay

最新推荐文章于 2024-07-11 16:15:52 发布

阅读量471

点赞数

分类专栏： css3 文章标签： css3 动画

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3 transform transition translate animatiion 区别：

transform是元素的各种属性的变换

<!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>

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>

而translate只是元素的变换属性而已，包括2d和3d变换

animation是动画，可以自由定义元素每一帧的属性变化

<!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>

sixtomay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 transform transition translate animatiion 区别

css3 transform transition translate animatiion 区别：transform是元素的各种属性的变换2D transform_CSS参考手册_web前端开发参考手册系列 h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}.test{zoom:1;width:7
复制链接

扫一扫