教程、示例代码和示例

教程、示例代码和示例


当我们使用 JS 和 jQuery 时，我们可以完全控制动画，我们可以创建一些很棒的效果，但价格相当高。 处理时间、跨浏览器兼容性（例如，移动设备在涉及 JS 时就大不相同）和代码复杂性本身是我们在创建动画界面时应该牢记的要点。

所以，今天我们将看看如何通过使用 CSS 动画和过渡来避免 JS。 我们将从非常基本的步骤到一些很棒的效果进行讨论，例如手风琴面板和动画子菜单。

找个座位，你的记事本和一个真正的浏览器（除了 IE 之外的任何东西），让我们开始吧。

热身

在使用 CSS 动画方面，我们有很多优点（和我们生活中的一切一样的缺点）。 如果您需要将这些产品卖给您的老板或客户，请记住以下几点：

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

CSS3 动画示例

在我们开始讨论这篇文章的内容之前，让我们看一些用纯 CSS 制作的漂亮动画。

纯 CSS Twitter 失败的鲸鱼

动画失败的鲸鱼

由 Steven Dennis 制作，请看实际操作。

纯 CSS 滚动可乐罐
CSS 3 动画示例：滚动可乐罐

由 Roman Cortes 制造，请参阅实际操作。

纯 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">activate</a>
<a href="#">deactivate</a>

CSS 过渡

CSS 过渡将从初始状态平滑地更改为结束状态。 因此，您将在主选择器中使用“transition”属性定义时间和将受到影响的每个属性以及动画应该如何。 让我们看一个例子：

.test {
	/*transition-property duration timing-function,*/
	color: blue;
	transition: color 2s, font-size 2s ease-out;
}
.test:hover {
	color: red;
}
.test:active {
	font-size: 200%;
}

当您将鼠标悬停在 .test 元素上时，它会逐渐将颜色从蓝色变为红色（多好的调色板啊？）。 单击元素时，字体大小将逐渐增加到默认字体大小的 200%。

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

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

三次贝塞尔函数将创建一个自定义动画，其中包含 4 个从 0 到 1 变化的数字，代表动画速度 X 持续时间的数学曲线。

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

div {
	width: 400px;
	-o-transition: width 2s;
	-moz-transition: width 2s;
	-webkit-transition: width 2s;
	transition: width 2s;
}

此外，您可以利用媒体查询根据浏览器宽度（移动设备、平板电脑）定义不同的转换。 这是一个简单的例子：

body {
	font-size: 1em;
}
@media screen and (max-width: 800px) {
	body {
		font-size: 0.8em;
}
}
@media screen and (max-width: 400px) {
	body {
		Font-size: 0.7em;
	}
}

当您增加浏览器宽度时，这里的字体大小会突然改变。 此代码将防止这种情况发生，从而提供更平滑的过渡：

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

如果您有不同的纵向/横向显示或尺寸，如果您想更改宽度、颜色、填充、菜单显示，您也可以使用它。

CSS 动画——真正有趣的开始

动画是在单个选择器中定义的一系列转换。 要定义 CSS 动画，您需要执行 2 个步骤。

@keyframe 规则用于定义一系列动画步骤，它由一个唯一的名称和描述此动画如何工作的样式定义。 像往常一样，我们需要一些供应商前缀，就像在这个例子中一样：

/*the same code for each vendor*/
@-o-keyframe my-animation { ...
@-moz-keyframe my-animation { ...
@-webkit-keyframe my-animation { ...
/*animation name*/
@keyframe my-animation {
	/*frame selector*/
	0% {
		/*frame style*/
		Left: 0px;
		Top: 0px;
	}
	25% {
		Left: 200px;
		Top: 0px;
	}
	50% {
		Left: 200px;
		Top: 200px;
	}
	75% {
		Left: 0px;
		Top: 200px;
	}
	100% {
		Left: 0px;
		Top: 0px;
	}
}

因此，每种样式都由帧/时间帧（如 Flash 动画中的那些帧）定义为百分比以及应在此处应用的样式。 例如，此关键帧表示元素将向左移动，然后是顶部，然后是右侧，然后是底部。

完成第 1 步并创建关键帧后，您实际上可以将其应用于元素。 然后我们将使用与 CSS 过渡几乎相同的逻辑，不同之处在于现在我们的“过渡”是一个非常复杂的动画。

要应用它，我们将使用动画属性，它有 7 个子属性：

  • 名称：那个唯一标识符
  • 持续时间：从 0% 到 100% 需要多长时间
  • Timing-function：与过渡计时功能几乎相同
  • 延迟：启动 0% 需要多长时间
  • 迭代计数：我们将有多少次重复（无限循环的“无限”）
  • 方向：正常或交替（反向）
  • 播放状态：如果动画正在运行或暂停

当 #test 元素是页面的目标时，这会将我们的动画应用到它：

#test:target {
	/*animation-name | duration | timing-function | delay  |iteration-count | direction | play-state */
	animation: my-animation 10s linear 0s infinite normal running;
}

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

仅 CSS 手风琴

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

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

这将只创建面板和触发每个面板的链接。 这就是魔法发生的地方：

/* any div that is inside of the accordion*/
.accordion div  {
	/*is hidden by default */
	height: 0;
	overflow: hidden;
	/* the black magic */
	transition: height 1s;
}
	/*when the mentioned div is the target */
	.accordion div:target {
		/*height:auto won’t work, but this will work fine*/
		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 {
	/* just making the links a tad better */
	display: block;
	padding: 4px;
}
nav {
	text-align: center;
}
	/* any menu (including the main one)*/
	nav ul {
		display: inline-block;
		list-style: none;
	}
		nav>ul>li {
			/* horizontal items (vertical will work fine too) */
			float: left;
		}
			nav li div {
				/*collapsing any sub-menu*/
				height: 0;
				overflow: hidden;
				/* Houdini feelings */
				transition: height 1s;
			}
			nav li:hover>div {
				height: 56px;
			}

加起来

这当然只是一个入门指南。 还有很多其他很酷的效果可以使用纯 CSS 动画来完成，而且还有很多事情还没有实现。

那么，你以前用过这个吗？ 你能想到另一个 CSS 动画的好应用吗？ 使用评论分享您的想法！

Leave a Comment