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

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

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

相关文章

  • 2016-01-13Pagify.js制作单页Web网站插件
  • 2016-02-27分享CSS常见中文字体Unicode编码表
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-03-26InVision设计原型建模团队协作工具
  • 2016-04-02详解JavaScript中面向对象基础知识
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15设计师的配色理论:创建属于自己调色板的方法
  • 2016-05-17都是好东西!设计师必备工具推荐(上)
  • 发布评论

    为您推荐

    用PS创建文字野火燃烧的效果

    火焰字体效果,你可以看到PS图象处理软件教程的最经典的方法之一。我在这里的另一个版本使用一些真正的火场图像,利用混合滤波器和混合的方法,创建文字野火燃烧的效果。

    • 用PS创建文字野火燃烧的效果
    • 用PS创建文字野火燃烧的效果
    • 用PS创建文字野火燃烧的效果
    • 用PS创建文字野火燃烧的效果
    问说网 · 发布于 2015-06-10 · 浏览 1115 · 评论 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具有易于…

    好喜欢太有爱了!设计美味菜单的10个大招

    设计一份菜单既是不错的挑战而且充满乐趣。菜单设计需要考虑的最重要的因素是便于阅读,视觉上促进食欲。结合这些特点,用数字化选择来吸引食客,在店里用印刷地菜单鼓励点…

    • 好喜欢太有爱了!设计美味菜单的10个大招
    • 好喜欢太有爱了!设计美味菜单的10个大招
    • 好喜欢太有爱了!设计美味菜单的10个大招
    • 好喜欢太有爱了!设计美味菜单的10个大招
    ClarissaAlan · 发布于 2016-05-14 · 浏览 1078 · 评论 0
    问说网 · 发布于 2016-12-02

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

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

    问说网 · 发布于 2016-05-16

    jQuery.ish简化压缩版的jQuery库

    jQuery.ish 是一个简化版的 jQuery,与 jQuery 完全兼容,当你不希望使用 jQuery 这么大的库时可以考虑使用。原始大小只有 1.7K,…

    设计朋友有福了!教你快速打造炫彩的逆光场景

    朋友们!今天我们一起来学习如何快速打造炫彩光效场景,我们在平时经常会看到一些光效处理非常棒的作品。看后我们有时会反问自己:”这些看起来很牛逼的光是怎么打上去的呢…

    • 设计朋友有福了!教你快速打造炫彩的逆光场景
    • 设计朋友有福了!教你快速打造炫彩的逆光场景
    • 设计朋友有福了!教你快速打造炫彩的逆光场景
    • 设计朋友有福了!教你快速打造炫彩的逆光场景
    静人静心 · 发布于 2016-05-16 · 浏览 972 · 评论 0

    向设计前辈学习!9个小技巧让你的设计更专业

    也许你还是一个设计新手,但你也想让你的设计作品看起来更好看,更专业。你应该先学习如何去完善你的半成品设计,简而言之,你应该是去学习,而不是在想象的海洋中盲目挣扎…

    • 向设计前辈学习!9个小技巧让你的设计更专业
    • 向设计前辈学习!9个小技巧让你的设计更专业
    • 向设计前辈学习!9个小技巧让你的设计更专业
    • 向设计前辈学习!9个小技巧让你的设计更专业
    ConnieMarian · 发布于 2016-05-16 · 浏览 1026 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13130 文章
    493 评论
    1947 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1826

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1755

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1765

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1261

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1461

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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