如何使用CSS3的transforms关键帧动画

问说网 · 发布于 2014-10-28 · 字数4262 · 浏览 1033 · 评论 0

css3已经在很短时间内得到了很大的发展,从语言的开发开始,从简单的风格选,到复杂的反应一个元素的表现形式,CSS已经不是曾今单纯的样式表了。CSS3具有很多神奇的功能,今天我们就来说说关于CSS Transforms关键帧动画,玩过flash的朋友应该对关键帧的概念不陌生,这些关键帧构成了基本的动画基础,使用关键帧,中间的动画让程序自动补充。

浏览器支持

支持CSS Transforms的浏览器实际上是相当广泛;二维变换,支持所有主要浏览器,包括IE9以上;三维变换,所有的现代浏览器的都支持,包括IE10以上。即使手机浏览器(与Opera Mini除外)同样支持CSS Transforms。

但是请记住,IE10不支持 preserve-3d 属性,以防止嵌套的3D转换元件。

在某些情况下,可能需要一些浏览器厂商前缀

性能

其实是有很多你可以做,CSS3给你默认的属性,你有很多选择来创建你所需要的效果,无论是在二维或三维的因为你甚至可以把两个或更多的变换性质共同创造一个更为复杂的影响。

我们先来看看二维动画:

  • matrix(x,x,x,x,x,x,x): 使用矩阵可以使用6个数字定义一个二维 变换。
  • translate(x,y): 你想怎么translate(移动)使用X和Y坐标的二维空间中的元素。你也可以使用翻译属性只在y或x位置使用 translatey和 translatex分别translate。
  • scale(x,y): 规模不需要介绍,你选择的你是多么想扩大或缩小规模的 元。这不一定是成比例的。喜欢翻译,如果你只想在一个坐标尺度scaleX和scaleY你也有。
  • rotate(angle): 使用旋转属性你可以旋转的元素,你希望在2D世界的角度。
  • skew(x-angle,y-angle): 在这里你可以定义一个斜变换使用X和Y角。如规模和翻译也有应用skewx或skewy属性使用一个角度的选择。

你可以看到这个列表有很多选择在2D世界和他们的使用非常简单,使用旋转属性例如你需要:

element {
   transform:rotate(45deg);
   -webkit-transform:rotate(45deg);
}

使用这两个简单的线条可以创建所有上面列表中的作用。

这个名单只是所有可用的变换的一部分,一部分的二维的,有更多的选项,可以用来转换元件但这次这个元素将在3D世界转化,列表:

  • matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x): 它的工作原理就像二维矩阵,但在这个特殊的矩阵可以使用16个数字的组合达到的效果。
  • translate3d(x,y,z): 使用此属性可以把一个元素使用它的X,Y和Z值。如果你只想使用Z值可以使用translatez财产。
  • scale3D(x,y,z): 它像2D规模的同时也增加了更多的灵活性的Z值。也有使用scalez仅为Z轴提供一个值的选择。
  • rotate3d(x,y,z,angle): 在一个类似的方式  的转动而在3D世界也。还有选择rotatex,rotatey和rotatez。
  • perspective(x): 在这里你定义单元的角度。

正如你所看到的也有很多选择,当谈到在3D变换,当它涉及到使用他们的工作方式相同,作为二维的,对于大型的3D所有你需要的是:

element {
  transform:scale(1.5,1.5,2);
  -webkit-transform:scale(1.5,1.5,2);
}

使用方法

现在我们已经看到哪些属性是在我们的处置,我们如何能够获得基本的,它的时间去学习 如何创造一些更有趣的效果,和大部分的时间,创造这些影响意味着你要使用一个以上的财产在同一单元,位置是你想要的方法。你甚至可以将二维与三维世界,如果你想旋转在2D世界和规模在3D中相同的元素的所有你需要将:

element {
  transform: rotate(180deg) scale3d(1.5,1.5,2);
  -webkit-transform: rotate(180deg) scale3d(1.5,1.5,2);
}

你可以看到堆叠在彼此的顶部,将是相当简单的,所有你需要的是一个空间之间的每个属性你用你清单上的下一个,这意味着你可以使用一个属性或5将你的元素,这取决于你想复杂的效果是。

一个很好的功能,也将是他们可以用CSS转换很容易用来创造一些伟大的流畅的动画,如果你想要一些元素的动画的转换版本在盘旋,你只需要正常的过渡与转换语法在悬停状态,像这样:

element {
  transition: all 0.5 ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}
element:hover {
   transform: rotate(360deg) scale3d(1.5,1.5,2);
   -webkit-transform: rotate(360deg) scale3d(1.5,1.5,2);
}

如果你在你的浏览器上测试这个你会看到它创建纯CSS悬停状态和所有我们做的是元素中添加过渡动画的语法,不需要其他任何东西,对变换的CSS的语法是相当简单的,也很容易被放入一个动画并使它的工作很容易在任何网站。

总结

正如你所看到的CSS变换有很大的力量和多样化使您可以创建几乎任何动画效果,你想在你的元素和支持,与伟大的浏览器的支持,它可以为一般人使用伟大的选择。

CSS3想出了一些很大的进步,当使用它的动画而不是使用JavaScript或插件像Flash是非常有益的,我希望你考虑测试这个动画在你自己的,使用它们在您的项目在路上。

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-04-01可访问友好的自定义键盘选择菜单
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15新品抢先!marche 后台UI界面PSD免费下载
  • 2016-05-17不看后悔!设计师应该具备的品牌意识
  • 2016-05-17UI教程系列可偷懒的图层样式
  • 2016-03-08Actionscript在Worker中共享传递数据
  • 2016-07-02jQuery Scroll Path按路径元素滚动动画插件
  • 发布评论

    为您推荐

    十分钟搞清字符集和字符编码
    问说网 · 发布于 2016-07-15

    十分钟搞清字符集和字符编码

    在介绍字符集之前,我们先了解下为什么要有字符集。我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流。

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    问说网 · 发布于 2016-12-02

    FlyJSONP轻量级的跨域AJAX请求插件

    FlyJSONP是一个JavaScript库,用于实现跨域GET和POST请求服务,支持JSONP,并取得一个JSON格式的数据响应,这个Library具有易于…

    问说网 · 发布于 2016-04-21

    使用基于jQuery的Datatables表格插件

    如何把数据库中的数据以表格的形式展示到前端,实现有很多方法,最近用jQuery的Datatables插件来实现了发现还是比较简单的,今天我们来看一个例子,来说明…

    问说网 · 发布于 2016-04-21

    EJS嵌入式轻量级JavaScript模版引擎

    "E" 是 "effective" 的缩写,EJS是一个嵌入式轻量级JavaScript模版引擎,让您通过简单易懂的JavaScript代码生成HTML标签,没…

    Adobe Illustrator中自定义圆角小技巧

    我们绘画的时候,一般都是直角的,在PS里面可以使用扩展或者是圆角矩形框,但是在Adobe Illustrator中似乎没那么方便,主要是两个软件的处理方式大不相…

    • Adobe Illustrator中自定义圆角小技巧
    • Adobe Illustrator中自定义圆角小技巧
    • Adobe Illustrator中自定义圆角小技巧
    • Adobe Illustrator中自定义圆角小技巧
    问说网 · 发布于 2016-05-13 · 浏览 1025 · 评论 0

    说的太好了!UI设计新手7条法则助你逆袭(二)

    作者是一位UX(User Experience,用户体验)设计师,他通过自己学习UI设计的过程,总结出7条实用的法则,为UI设计新手提供了宝贵的经验。前几天分享…

    • 说的太好了!UI设计新手7条法则助你逆袭(二)
    • 说的太好了!UI设计新手7条法则助你逆袭(二)
    • 说的太好了!UI设计新手7条法则助你逆袭(二)
    • 说的太好了!UI设计新手7条法则助你逆袭(二)
    MalanSally · 发布于 2016-05-16 · 浏览 969 · 评论 0
    PeggyVeromca · 发布于 2016-05-16

    实用好文!iOS和安卓设计规范的10个不同点?

    读了安卓和iOS的设计规范再看app,有一种指出“这是巴洛克风格的建筑设计”的乐趣。iOS设计规范围绕一个核心,就是“模态”安卓设计规范如果总结成一句话,就是“…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13130 文章
    495 评论
    2031 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2563

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2418

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2467

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1951

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2134

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!