码迷，mamicode.com
首页 > Web开发 > 详细

CSS3 Transforms、Transitions和Animation属性总结

时间：2016-07-03 00:34:29      阅读：392      评论：0      收藏：0      [点我收藏+]

标签：

css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性。

Transform

浏览器支持情况：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

2D transform变换方法

函数 描述
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
rotate(angle) 定义 2D 旋转，在参数中规定角度
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵
  • translate(x, y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。x, y的值可以取正负，分别表示表示向不同的方向偏移。
  • rotate(angle)方法， 表示旋转angle角度。angle为正时，按顺时针角度旋转，为负值时，元素逆时针旋转。
  • scale(x, y)方法，表示元素在x轴和y轴上的缩放比例，参数大于1时，元素放大，小于1时，元素缩小。
  • skew(x-angle,y-angle)方法，用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg
  • matrix(n,n,n,n,n,n)方法， 以一个含六值的变换矩阵的形式指定一个2D变换，此属性值使用涉及到数学中的矩阵，感兴趣的读者可以深入了解一下，这里就不做详细介绍了。

下面是上面方法的演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform 2D演示</title>
    <style type="text/css">
        #container{
            width: 700px; 
            height: 120px; 
            border: 1px solid blue; 
            margin: 20px auto; 
            padding: 20px 20px;
        }
        #div1 ,#div2, #div3, #div4{
            height: 100px; 
            width: 100px; 
            border: 1px dashed red;
            display: inline-block;
        }
        #div1 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED; 
            transform:translate(20px,10px);         /* W3C标准 */
            -ms-transform:translate(20px,10px);     /* IE 9 */
            -moz-transform:translate(20px,10px);    /* Firefox */
            -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */
            -o-transform:translate(20px,10px);      /* Opera */
        }
        #div2{margin-left: 50px;}
        #div2 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED;
            transform:rotate(45deg);        /* W3C标准 */
            -ms-transform:rotate(45deg);    /* IE 9 */
            -moz-transform:rotate(45deg);   /* Firefox */
            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
            -o-transform:rotate(45deg);         /* Opera */
        }
        #div3{margin-left: 100px;}
        #div3 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED;
            transform:scale(2,0.5);         /* W3C标准 */
            -ms-transform:scale(2,0.5);     /* IE 9 */
            -moz-transform:scale(2,0.5);    /* Firefox */
            -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */
            -o-transform:scale(2,0.5);      /* Opera */
        }
        #div4{margin-left: 100px;}
        #div4 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED;
            transform:skew(30deg,-20deg);       /* W3C标准 */
            -ms-transform:skew(30deg,-20deg);   /* IE 9 */
            -moz-transform:skew(30deg,-20deg);  /* Firefox */
            -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */
            -o-transform:skew(30deg,-20deg);        /* Opera */
        }

    </style>
</head>
<body>
<div id="container">
    <div id="div1">
        <div>translate</div>
    </div>
    <div id="div2">
        <div>rotate</div>
    </div>
    <div id="div3">
        <div>scale</div>
    </div>
    <div id="div4">
        <div>skew</div>
    </div>
</div>  
</body>
</html>

效果如下：
技术分享

transform-origin 属性

前面我们提到的transform的方法都是基于元素的中心来变换的，也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变。该属性可以接收三个参数：

transform-origin: x-axis y-axis z-axis;

  • x-axis，表示水平方向上的取值，可以取 字符参数值left,center right，也可以取百分比，字符参数值对应的百分值为left=0%;center=50%;right=100%。
  • y-axis，表示竖直方向上的取值，还可以设置字符值top,center,bottom，也可以取百分比，字符参数值对应的百分值为top=0%;center=50%;bottom=100%。
  • z-axis，表示视图被置于 Z 轴的何处，用于3D变形中。

我们可以设置基点来与之前的transform图形进行对比：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-origin演示</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 800px; 
            height: 150px; 
            border: 1px solid blue; 
            margin: 20px auto; 
            padding: 20px 20px;
        }
        #div1 ,#div2, #div3, #div4{
            height: 100px; 
            width: 100px; 
            border: 1px dashed red;
            display: inline-block;
        }
        #div1 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED; 
            transform:translate(20px,10px);         /* W3C标准 */
            -ms-transform:translate(20px,10px);     /* IE 9 */
            -moz-transform:translate(20px,10px);    /* Firefox */
            -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */
            -o-transform:translate(20px,10px);      /* Opera */
            transform-origin:left top;          /* W3C标准 */
            -ms-transform-origin:left top;  /* IE 9 */
            -moz-transform-origin:left top; /* Firefox */
            -webkit-transform-origin:left top; /* Safari 和 Chrome */
            -o-transform-origin:left top;       /* Opera */
        }
        #div2{margin-left: 100px;}
        #div2 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED;
            transform:rotate(45deg);        /* W3C标准 */
            -ms-transform:rotate(45deg);    /* IE 9 */
            -moz-transform:rotate(45deg);   /* Firefox */
            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
            -o-transform:rotate(45deg);         /* Opera */
            transform-origin:0% 0%;         /* W3C标准 */
            -ms-transform-origin:0% 0%;     /* IE 9 */
            -moz-transform-origin:0% 0%;    /* Firefox */
            -webkit-transform-origin:0% 0%;  /*Safari 和 Chrome */
            -o-transform-origin:0% 0%;      /* Opera */
        }
        #div3{margin-left: 50px;}
        #div3 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED;
            transform:scale(2,0.5);         /* W3C标准 */
            -ms-transform:scale(2,0.5);     /* IE 9 */
            -moz-transform:scale(2,0.5);    /* Firefox */
            -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */
            -o-transform:scale(2,0.5);      /* Opera */
            transform-origin:center top;        /* W3C标准 */
            -ms-transform-origin:center top;    /* IE 9 */
            -moz-transform-origin:center top;   /* Firefox */
            -webkit-transform-origin:center top; /* Safari 和 Chrome */
            -o-transform-origin:center top;     
        }
        #div4{margin-left: 150px;}
        #div4 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED;
            transform:skew(30deg,-20deg);       /* W3C标准 */
            -ms-transform:skew(30deg,-20deg);   /* IE 9 */
            -moz-transform:skew(30deg,-20deg);  /* Firefox */
            -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */
            -o-transform:skew(30deg,-20deg);        /* Opera */
            transform-origin:100% 100%;         /* W3C标准 */
            -ms-transform-origin:100% 100%;     /* IE 9 */
            -moz-transform-origin:100% 100%;    /* Firefox */
            -webkit-transform-origin:100% 100%; /* Safari 和 Chrome */
            -o-transform-origin:100% 100%; 
        }

    </style>
</head>
<body>
<div id="container">
    <div id="div1">
        <div>translate(基点为(left top)</div>
    </div>
    <div id="div2">
        <div>rotate(基点为(0%, 0%)</div>
    </div>
    <div id="div3">
        <div>scale(基点为(center, top)</div>
    </div>
    <div id="div4">
        <div>skew(基点为(100%, 100%)</div>
    </div>
</div>  
</body>
</html>

效果如下：
技术分享

对比发现：translate()方法与之前的没有区别，其他三个方法基点改变了，图形变形效果也有所变化。

3D transform变换方法

Internet Explorer 10 和 Firefox 支持 3D 转换.
Chrome 和 Safari 必须添加前缀 -webkit-.
Opera 还不支持 3D 转换(支持 2D 转换 ).

三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数：

  • 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
  • 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
  • 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
  • 3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。

还有以下几个转换属性：

  • transform-style： 规定被嵌套元素如何在 3D 空间中显示。
  • perspective： 规定 3D 元素的透视效果。
  • perspective-origin： 规定 3D 元素的底部位置。
  • backface-visibility： 定义元素在不面对屏幕时是否可见。

目前各大主流浏览器对transform 3d属性的兼容性还不是特别好，感兴趣的读者可以自行深入了解。下面我们介绍几个常用的功能方法：

rotateX()方法，围绕其在一个给定度数X轴旋转的元素；
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素；
rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform 3d </title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 440px; 
            height: 120px; 
            border: 1px solid blue; 
            margin: 20px auto; 
            padding: 20px 20px;
        }
        #div1 ,#div2, #div3, #div4{
            height: 100px; 
            width: 100px; 
            border: 1px dashed red;
            display: inline-block;
        }
        #div1 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED; 
            transform:rotateX(45deg);       /* W3C标准 */
            -webkit-transform:rotateX(45deg)); /* Safari 和 Chrome */
        }
        #div2{margin-left: 50px;}
        #div2 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED; 
            transform:rotateY(45deg);       /* W3C标准 */
            -webkit-transform:rotateY(45deg)); /* Safari 和 Chrome */
        }
        #div3{margin-left: 50px;}
        #div3 div{
            height: 100px;
            width: 100px; 
            background: #63F7ED; 
            transform:rotateZ(45deg);       /* W3C标准 */
            -webkit-transform:rotateZ(45deg)); /* Safari 和 Chrome */
        }

    </style>
</head>
<body>
    <div id="container">
        <div id="div1">
            <div>rotateX(45deg)</div>
        </div>
        <div id="div2">
            <div>rotateY(45deg)</div>
        </div>
        <div id="div3">
            <div>rotateZ(45deg)</div>
        </div>
    </div>  
</body>
</html>

下面是显示效果：
技术分享

Transition

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

transition属性的值包括以下四个：

  • transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。
  • transition-duration：指定属性过渡的持续时间
  • transition-timing-function：指定渐变的速度：
    1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
    2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
    3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
    4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
    5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
    6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
  • transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。

浏览器兼容性

Internet Explorer 9 以及更早的版本，不支持 transition 属性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。

下面还是以实例来说明transition的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition演示1</title>
    <style type="text/css">
        .animated_div {
            margin: 100px auto;
            width:100px;
            height:60px;
            background:#92B901;
            /*简写属性*/
            -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
            /*每个属性分开写*/
            transition-property:width,height,transform,background,opacity;
            transition-duration:1s,1s,1s,1s,1s,1s;
            -webkit-border-radius:5px;
            border-radius:5px;
            opacity:0.4;
        }
        .animated_div:hover {
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
            opacity:1;
            background:#1ec7e6;
            width:200px;
            height:120px;
        }
    </style>
</head>
<body>
<div class="animated_div"></div>
</body>
</html>

上述代码当鼠标移到div上时，CSS属性：width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_div里定义的样式，过渡过程大致如下：
技术分享

再给一个网上的嫦娥奔月的示例，要求：当鼠标移到图片上时，嫦娥出现，移开时嫦娥消失

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition演示2</title>
    <style type="text/css">
        body{
          color: #fff;
          background:#000;
        }
        .change{
          display:block;
          width:400px;
          height:400px;
          background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;
          background-size:cover;
          border:1em solid rgba(255,255,255,.8);
          margin:50px auto;
        }
        .change img{
          display:block;
          width:300px;
          height:284px;
          opacity:0;
          -webkit-transform:translate(-100px,-100px);
          transform:translate(-100px,-100px);
          -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
          transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
        }
        .change:hover img{
          -webkit-transform:translate(0px,0px);
          transform:translate(0px,0px);
          opacity:1;
        }
    </style>
</head>
<body>
    <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
        <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
    </a>
</body>
</html>

为了使嫦娥有飘入飘出的效果，设置了transform属性，配合opacity属性，加入过渡效果就能达到效果：
技术分享

Animation

要使用animation动画，先要熟悉一下keyframes,Keyframes的语法规则:命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则。不同关键帧是通过from（相当于0%）、to（相当于100%）或百分比来表示（为了得到最佳的浏览器支持，建议使用百分比），如下定义一个简单的动画：

@keyframes myfirst /*定义动画名*/
    {
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式，0%可以换成from*/
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%可以换成to*/
    }

@keyframes定义好了，要使其能发挥效果，必须通过animation把它绑定到一个选择器，否则动画不会有任何效果。下面列出了animation的属性：

属性 描述 取值
animation 所有动画属性的简写属性，除了 animation-play-state 属性
animation-name 规定 @keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒 默认是 0
animation-timing-function 规定动画的速度曲线 默认是 “ease”
animation-delay 规定动画何时开始 默认是 0
animation-iteration-count 规定动画被播放的次数 默认是 1（infinite：无限次
animation-direction 规定动画是否在下一周期逆向地播放 默认是 “normal”（reverse：反向播放；alternate：奇数次正向播放，偶数次反向播放；alternate-reverse：奇数次反向播放，偶数次正向播放。）
animation-play-state 规定动画是否正在运行或暂停 默认是 “running”（paused：暂停动画）

下面设置上述的所有属性

animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

上述所有代码可以如下简写：

animation:myfirst 5s linear 2s infinite alternate;
animation-play-state:running;

浏览器兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

下面给出上面介绍的关于keyframes和animation属性的完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation演示</title>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
    }

    @keyframes myfirst /*定义动画名*/
    {
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式，0%相当于from*/
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%相当于to*/
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
    }
    </style>
</head>
<body>
    <p>该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    <div></div>
</body>
</html>

上面代码演示了一个正方形沿着一个正方形轨迹运动，基数次按正方向运动，偶数次按反方向运动，运动过程中还带有颜色变化。具体效果，读者可以自行运行代码观察。

至此，关于CSS3中变形和动画相关的属性介绍完了，博文中只介绍了属性的基本用法，这三个属性的功能很强大，读者可以根据自己的喜好设计出完美的效果。

CSS3 Transforms、Transitions和Animation属性总结

标签：

原文地址：http://blog.csdn.net/u014607184/article/details/51801393
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！