如何充分利用CSS3动画:教程,示例代码和示例

文章撰写者:
  • 网站设计
  • 更新:Aug 28,2013

当我们使用JS和jQuery时,我们可以完全控制动画,我们可以创建一些很棒的效果,但价格非常高。 处理时间,跨浏览器兼容性(例如,移动设备在JS方面完全不同),代码复杂性本身是我们在创建动画界面时应该记住的要点。

所以,今天我们将看到如何通过使用CSS动画和过渡来避免JS。 我们将从最基本的步骤讨论一些令人敬畏的效果,如手风琴面板和动画子菜单。

抓住一个座位,你记事本和一个真正的浏览器(除了IE之外),让我们开始吧。

热身

在使用CSS动画时,我们有很多优点(以及我们生活中的一切)。 如果您需要将这些产品卖给您的老板或客户,您应该记住这一点:

  • 它们可能更快,因为它们可以利用硬件加速(如HTML5实现)
  • 它们在移动设备上的性能会更好,并且不需要特定的代码来跟踪触摸事件
  • JS需要由浏览器解释,打破浏览器的可能性要大得多。 因此,当CSS失败时,它会无声地失败,而JS可能会破坏整个页面
  • 他们有很好的浏览器支持(这个网站将帮助您检查具体的统计数据: http://caniuse.com/#search )

CSS3动画的示例

在我们开始讨论这篇文章之前,让我们看一下纯CSS中的一些漂亮的动画。

纯CSS Twitter失败鲸鱼

动画失败的鲸鱼

由史蒂文丹尼斯制作, 看到这个在行动。

纯CSS滚动可乐可以
CSS 3动画示例:滚动可乐罐头

罗马科尔特斯制造, 看到这个在行动。

纯CSS走路的人

CSS 3动画示例:行走的人

由Andrew Hoyer制作, 看到这个在行动。

弄脏你的手

我们来开始代码。 我们将使用很多CSS伪类来触发动画。 说实话,许多开发人员建议你使用JS激活和取消激活动画,但在这里我们会看到更简单的方法:

#test {background:red; } #test:hover {background:green; } #test:active {background:blue; } #test:target {background:black; }

我们还有一些其他伪类可供使用,但你已经有了这个想法! 所以如果你点击#test元素会发生这种情况(假设它是一个链接):

  • 正常状态:背景为红色
  • 悬停:当鼠标进入元素区域时,它将具有绿色背景
  • 活动:当您单击其上的光标并且仍然按下鼠标按钮时,背景颜色将为蓝色
  • 目标:当前页面在URL中有#test时,此元素将为黑色

这些中的每一个都可用于CSS动画,例如,您可以创建2链接以激活和停用使用此代码的目标伪元素的CSS动画:

<a href='#test'>激活</a> <a href='#'>停用</a>

CSS过渡

CSS过渡将从初始状态顺利变为最终状态。 因此,您将在主选择器中使用“transition”属性定义时间和将受影响的每个属性以及动画应该如何。 我们来看一个例子:

.test {/ * transition-property duration timing-function,* / color:blue; 过渡:颜色2s,字体大小2s缓出; } .test:hover {color:red; } .test:active {font-size:200%; }

当你悬停.test元素时,它会逐渐将颜色从蓝色变为红色(这是一个很好的调色板,是吧?)。 单击该元素时,字体大小将逐渐增加到默认字体大小的200%。

我们还有“过渡时间”属性,设置为缓出,即动画可用的“时间”将如何使用。 以下是可能的值:

  • 线性:从开始到结束的速度相同
  • 缓入:缓慢启动
  • 缓解:缓慢结束
  • 轻松:慢启动,快速中间,然后慢速结束
  • 缓入:缓慢启动,缓慢结束
  • Cubic-bezier(a,b,c,d):自定义速度

立方贝塞尔函数将创建一个自定义动画,其4数字从0到1不等,表示动画速度X持续时间的数学曲线。

为了获得更好的浏览器兼容性,您应该考虑使用opera,Firefox和webkit的供应商前缀,如下所示:

div {width:400px; -o-transition:宽度2s; -moz-transition:宽度2s; -webkit-transition:width 2s; 过渡:宽度2s; }

此外,您可以使用媒体查询根据浏览器宽度(移动设备,平板电脑)定义不同的过渡。 这是一个简单的例子:

body {font-size:1em; } @media screen and(max-width:800px){body {font-size:0.8em; @media screen和(max-width:400px){body {字体大小:0.7em; }}

增加浏览器宽度时,字体大小会突然改变。 此代码将防止这种情况发生,从而实现更平滑的转换:

body {-o-transition:font-size .5s linear; -moz-transition:font-size .5s linear; -webkit-transition:font-size .5s linear; 过渡:font-size .5s linear; }

如果您想要更改宽度,颜色,填充,菜单显示,您可以使用此功能,如果您有不同的纵向/横向显示或尺寸。

CSS动画 - 真正有趣的开始

动画是在单个选择器中定义的一系列过渡。 要定义CSS动画,您需要遵循2步骤。

@keyframe规则用于定义一系列动画步骤,它由唯一名称和描述此动画如何工作的样式定义。 像往常一样,我们需要一些供应商前缀,如下例所示:

/ *每个供应商的相同代码* / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / *动画名称* / @keyframe my-animation {/ * frame selector * / 0%{/ * frame style * / Left:0px; 上:0px; } 25%{左:200px; 上:0px; } 50%{左:200px; 上:200px; } 75%{左:0px; 上:200px; } 100%{左:0px; 上:0px; }}

因此,每个样式都由帧/时间帧(如flash动画中的那些帧)定义为百分比以及应该应用于那里的样式。 例如,这个关键帧表示元素将向左移动,然后向上移动,然后向右移动,然后向下移动。

在您执行步骤1并创建关键帧后,您可以将其实际应用于元素。 然后我们将使用与我们对CSS过渡完全相同的逻辑,区别在于现在我们的“过渡”是一个非常复杂的动画。

要应用它,我们将使用animation属性,它具有7子属性:

  • 名称:该唯一标识符
  • 持续时间:从0%到100%需要多长时间
  • 定时功能:与转换定时功能几乎相同
  • 延迟:启动0%需要多长时间
  • 迭代计数:我们将有多少重复(无限循环的“无限”)
  • 方向:正常或交替(反向)
  • 播放状态:如果动画正在运行或暂停

当它是页面的目标时,这将把我们的动画应用到#test元素:

#test:target {/ * animation-name | 持续时间| 定时功能| 延迟|迭代次数| 方向| play-state * / animation:my-animation 10s linear 0s无限正常运行; }

考虑到这一点,我们可以创建一些很棒的例子。

CSS Only Accordion

我们将使用CSS动画创建可折叠面板。 这是基本的HTML结构:

<div class =“accordion”> <a href="#tab1"> Tab 1 </a> <div id =“tab1”> <p> TEXT 1 </ p> </ div> <a href =“# tab2“>选项卡2 </a> <div id =”tab2“> <p> TEXT 2 </ p> </ div> <a href="#tab3">选项卡3 </a> <div id =” tab3“> <p> TEXT 3 </ p> </ div> </ div>

这将只创建面板和将触发其中每个面板的链接。 这就是魔术发生的地方:

/ *在手风琴* * .accordion div {/ *内部的任何div默认隐藏* / height:0; 溢出:隐藏; / *黑魔法* /过渡:高度1s; } / *当提到的div是目标* / .accordion div:target {/ * height:auto不起作用,但这样可以正常工作* / height:80px; }

很简单,对吧? 你为此花了整整一生的时间使用JS吗? :)

仅包含子菜单的CSS菜单

这是另一个相当简单的应用程序。 你当然在你的网站上有一个导航菜单,我们经常需要在那里使用一些子菜单。 显示和隐藏项目的最佳方式是使用jQuery,对吧? 好吧,在测试此代码后再想一想:

<nav> <ul> <li> <a href='#item1'> Item 1 </a> <div> <ul> <li> <a href='#item11'> Item 1.1 </a> </ li> <li> <a href='#item12'> Item 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Item 2 </a> <div> <ul> <li> <a href='#item21'> Item 2.1 </a> </ li> <li> <a href='#item22'> Item 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

巫术从这里开始:

a {/ *只是让链接更好* / display:block; 填充:4px; } nav {text-align:center; } / *任何菜单(包括主菜单)* / nav ul {display:inline-block; list-style:none; } nav> ul> li {/ *水平项目(垂直也可以正常工作)* / float:left; } nav li div {/ *折叠任何子菜单* / height:0; 溢出:隐藏; / * Houdini的感受* /过渡:身高1s; } nav li:hover> div {height:56px; }

加起来

这当然只是一个入门指南。 还有许多其他很酷的效果可以使用CSS动画完成,还有很多事情要做。

那你以前用过吗? 你能想到CSS动画的另一个好的应用吗? 使用评论分享您的想法!

关于罗切斯特奥利维拉

我是来自巴西Itajubá(MG)的网页设计师和企业家。 我喜欢写一些关于模糊主题和做一些很酷的东西。