当我们使用JS和jQuery时，我们可以完全控制动画，我们可以创建一些很棒的效果，但价格非常高。 处理时间，跨浏览器兼容性（例如，移动设备在JS方面完全不同），代码复杂性本身是我们在创建动画界面时应该记住的要点。
所以，今天我们将看到如何通过使用CSS动画和过渡来避免JS。 我们将从最基本的步骤讨论一些令人敬畏的效果，如手风琴面板和动画子菜单。
抓住一个座位，你记事本和一个真正的浏览器（除了IE之外），让我们开始吧。
热身
在使用CSS动画时，我们有很多优点（以及我们生活中的一切）。 如果您需要将这些产品卖给您的老板或客户，您应该记住这一点：
- 它们可能更快，因为它们可以利用硬件加速（如HTML5实现）
- 它们在移动设备上的性能会更好，并且不需要特定的代码来跟踪触摸事件
- JS需要由浏览器解释，打破浏览器的可能性要大得多。 因此，当CSS失败时，它会无声地失败，而JS可能会破坏整个页面
- 他们有很好的浏览器支持（这个网站将帮助您检查具体的统计数据： http://caniuse.com/#search )
CSS3动画的示例
在我们开始讨论这篇文章之前，让我们看一下纯CSS中的一些漂亮的动画。
纯CSS Twitter失败鲸鱼
[icon angle-right size=12] 由 Steven Dennis 制作， 看到这个在行动。
纯CSS滚动可乐可以
[icon angle-right size=12] 由 Roman Cortes 制造， 看到这个在行动。
纯CSS走路的人
[icon angle-right size=12] 由 Andrew Hoyer 制作， 看到这个在行动。
弄脏你的手
我们来开始代码。 我们将使用很多CSS伪类来触发动画。 说实话，许多开发人员建议你使用JS激活和取消激活动画，但在这里我们会看到更简单的方法：
#test { 背景：红色； } ＃测试：hover { 背景：绿色； } #test:active { 背景：蓝色； } #test:target { 背景：黑色； }
我们还有一些其他伪类可供使用，但你已经有了这个想法！ 所以如果你点击#test元素会发生这种情况（假设它是一个链接）：
- 正常状态：背景为红色
- Hover：当鼠标进入元素区域时，它会有一个绿色背景
- 活动：当您单击其上的光标并且仍然按下鼠标按钮时，背景颜色将为蓝色
- 目标：当前页面在URL中有#test时，此元素将为黑色
这些中的每一个都可用于CSS动画，例如，您可以创建2链接以激活和停用使用此代码的目标伪元素的CSS动画：
激活停用
CSS过渡
CSS过渡将从初始状态顺利变为最终状态。 因此，您将在主选择器中使用“transition”属性定义时间和将受影响的每个属性以及动画应该如何。 我们来看一个例子：
.test { /*transition-property duration timing-function,*/ color: blue; transition: color 2s, font-size 2s ease-out; } 。测试：hover { 红色; } .test:active { 字体大小：200%； }
当你 hover .test 元素的颜色会逐渐从蓝色变为红色（多么漂亮的调色板，是吧？）。 单击该元素时，字体大小将逐渐增加到默认字体大小的 200%。
我们还有“过渡时间”属性，设置为缓出，即动画可用的“时间”将如何使用。 以下是可能的值：
- 线性：从开始到结束的速度相同
- 缓入：缓慢启动
- 缓解：缓慢结束
- 轻松：慢启动，快速中间，然后慢速结束
- 缓入：缓慢启动，缓慢结束
- Cubic-bezier（a，b，c，d）：自定义速度
立方贝塞尔函数将创建一个自定义动画，其4数字从0到1不等，表示动画速度X持续时间的数学曲线。
为了更好的浏览器兼容性，您应该考虑使用供应商前缀 opera, Firefox, 和 webkit 是这样的：
div { 宽度：400px; -o-过渡：宽度2s； -moz-过渡：宽度2s； -webkit-transition: 宽度 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; 过渡：字体大小 .5s 线性； }
如果您想要更改宽度，颜色，填充，菜单显示，您可以使用此功能，如果您有不同的纵向/横向显示或尺寸。
CSS动画 - 真正有趣的开始
动画是在单个选择器中定义的一系列过渡。 要定义CSS动画，您需要遵循2步骤。
@keyframe规则用于定义一系列动画步骤，它由唯一名称和描述此动画如何工作的样式定义。 像往常一样，我们需要一些供应商前缀，如下例所示：
/*每个供应商的代码相同*/ @-o-keyframe my-animation { ... @-moz-keyframe my-animation { ... @-webkit-keyframe my-animation { ... /*动画名称*/ @keyframe my-animation { /*帧选择器*/ 0% { /*帧样式*/ 左： 0像素； 顶部：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 结构体：
标签1 文本1 标签1 文字1 标签2 文字2
这将只创建面板和将触发其中每个面板的链接。 这就是魔术发生的地方：
/ *在手风琴* * .accordion div {/ *内部的任何div默认隐藏* / height：0; 溢出：隐藏; / *黑魔法* /过渡：高度1s; } / *当提到的div是目标* / .accordion div：target {/ * height：auto不起作用，但这样可以正常工作* / height：80px; }
很简单，对吧？ 你为此花了整整一生的时间使用JS吗？ :)
仅包含子菜单的CSS菜单
这是另一个相当简单的应用程序。 你当然在你的网站上有一个导航菜单，我们经常需要在那里使用一些子菜单。 显示和隐藏项目的最佳方式是使用jQuery，对吧？ 好吧，在测试此代码后再想一想：
项目1 项目1 项目11 项目1.1 项目12 项目1.2
巫术从这里开始：
a { /* 只是让链接更好一点 */ display: block; 填充：4px； } nav { 文本对齐：居中； } /* 任何菜单（包括主菜单）*/ nav ul { display: inline-block; 列表样式：无； } nav>ul>li { /* 水平项（垂直项也可以）*/ float: left; } nav li div { /*折叠任何子菜单*/ height: 0; 溢出：隐藏； /* Houdini 感受 */ transition: height 1s; 导航李：hover>div { 高度：56px； }
加起来
这当然只是一个入门指南。 还有许多其他很酷的效果可以使用CSS动画完成，还有很多事情要做。
那你以前用过吗？ 你能想到CSS动画的另一个好的应用吗？ 使用评论分享您的想法！
