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

问说网 · 发布于 2014-10-28 · 字数4262 · 浏览 1022 · 评论 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是非常有益的,我希望你考虑测试这个动画在你自己的,使用它们在您的项目在路上。

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

相关文章

  • 2014-09-27CSS3 Media Queries 详细介绍与使用方法
  • 2015-11-07Cyer类似jQuery的简单轻量级的JavaScript库
  • 2015-12-19使用Transform让百分比布局元素水平垂直居中
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15这效果超酷!快速搞定多边形风格设计
  • 2016-05-17AI教程!教你绘制扁平化风格的卡通人物肖像(四人组合篇)
  • 2016-06-25分享20款优秀的Web移动开发框架
  • 2016-07-04Trianglify唯美的几何图形背景生成插件
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-02-27

    HTML5网页中SVG和Canvas以及IMG图片的转换方法

    网页中显示的图片或者是图形,一般就只有几种,对于静态的内容,大多会选择jpg、png、gif的图片,这些图片称之为位图,放大以后会出现锯齿,也是不易更改的图形,…

    网页中常用的字体讲解

    字体作为信息传达的载体,为我们理解和阅读带来了巨大的改变,不同的字体和样式会给人不同的感受,本文将给大家讲解网页中最常使用的字体,希望对您会有所帮助。

    • 网页中常用的字体讲解
    • 网页中常用的字体讲解
    • 网页中常用的字体讲解
    • 网页中常用的字体讲解
    问说网 · 发布于 2015-07-24 · 浏览 2193 · 评论 0
    问说网 · 发布于 2015-08-22

    HTML5是否真的需要Picture标签?

    responsive design 并不是 responsive image,它能创建适应性的布局可以缩放图片但不能智能加载适应屏幕大小的图片。在小尺寸屏幕上缩…

    Es5-shim在旧版本的JavaScript引擎上实现了ECMAScript 5的新特性

    Es5-shim是一个简单库,它是在ECMAScript 3的引擎上实现了ECMAScript 5的新特性,而且在Node.js上和在浏览器上有完全相同的表现,…

    • Es5-shim在旧版本的JavaScript引擎上实现了ECMAScript 5的新特性
    • Es5-shim在旧版本的JavaScript引擎上实现了ECMAScript 5的新特性
    • Es5-shim在旧版本的JavaScript引擎上实现了ECMAScript 5的新特性
    • Es5-shim在旧版本的JavaScript引擎上实现了ECMAScript 5的新特性
    问说网 · 发布于 2015-12-09 · 浏览 3308 · 评论 0
    用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-03-17 · 浏览 1233 · 评论 0
    问说网 · 发布于 2016-04-03

    JavaScript面向对象继承基础讲解

    既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考详解JavaScript中面向对象基础知识,接下来讲一般通过那…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13130 文章
    494 评论
    2011 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2377

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2251

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2298

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1784

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1941

    更多 推荐作者

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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