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

问说网 · 发布于 2014-10-28 · 字数4262 · 浏览 1017 · 评论 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-11-06Docco简单方便的项目文档生成器
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-03-17使用Google Sitebricks构建更好的Web应用程序
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15设计自学指南!非科班,如何成为优秀设计师
  • 2016-05-16超级福利!6个免费无版权世界级图片素材特供网站
  • 2016-06-02C语言Side effect和Sequence point副作用
  • 2016-06-11jQuery Collapse轻量级的手风琴菜单插件
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-11-30

    Poker.JS基于HTML5 Canvas实现扑克牌效果的JS库

    Poker.JS是通过扩展HTML5 Canvas实现的画扑克牌的JS库。用户可以很容易地在img或canvas创建单个的扑克牌,或者直接在大canvas里画牌…

    用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-12

    一个组件框架的构建

    组件:提供特定功能的软件实体,能够独立编译,通过不同的接口表现不同的行为。目标是实现组件开发和产品开发分离,接口和实现分离。通过注册组件可以在产品中快速的定制组…

    C语言的设计模式之依赖倒置
    问说网 · 发布于 2016-03-18

    C语言的设计模式之依赖倒置

    依赖倒置:就是要依赖于抽象,不要依赖于具体。简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合。

    使用Photoshop创建复古裂纹文字效果

    在这个教程中,我会向你展示,如何使用Photoshop创建复古裂纹文字效果,最近的一段时间,很多粉丝,喜欢这种复古字体效果,而且这种富有创造力的效果,很多通过游…

    • 使用Photoshop创建复古裂纹文字效果
    • 使用Photoshop创建复古裂纹文字效果
    • 使用Photoshop创建复古裂纹文字效果
    • 使用Photoshop创建复古裂纹文字效果
    问说网 · 发布于 2016-04-20 · 浏览 1209 · 评论 0
    问说网 · 发布于 2016-12-02

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    就是这么有范儿!简单几招让素材变得独具一格

    今天CYHD给朋友们带来的是​@剥壳使腾讯游戏设计师分享的让普通素材变得独具一格的方法,希望对大家有帮助!让素材带点“范儿”,是留住观者的眼球,更是为了能留住观…

    • 就是这么有范儿!简单几招让素材变得独具一格
    • 就是这么有范儿!简单几招让素材变得独具一格
    • 就是这么有范儿!简单几招让素材变得独具一格
    • 就是这么有范儿!简单几招让素材变得独具一格
    JouleDebby · 发布于 2016-05-16 · 浏览 865 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13128 文章
    493 评论
    1931 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1809

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1743

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1750

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1249

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1447

    更多 推荐作者

    关注 亭亭

    文章 125 · 评论 1

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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