问说网全新改版上线,邀您一起讨论

问说网 · 发表于 2014-10-28

文章13116 · 评论469

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

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

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接
北欧牧风羽绒被

更多 热门话题

APP界面

APP界面

文章 41517

APP欣赏

APP欣赏

文章 41450

APP手机界面

APP手机界面

文章 41440

图片素材

图片素材

文章 29463

高清图片

高清图片

文章 26225

更多 推荐作者

问说网

文章 13116

GallupDarnell

文章 117

GibbonRoy

文章 115

StuartKelly

文章 114

YeatesGeoffrey

文章 113

发布评论

顶部 反馈 评论 底部

意见反馈

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

您的反馈我们已收到!

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