css隐藏到显示的过渡动画_如何使用CSS3过渡和动画突出显示UI更改

设计师和艺术家在尝试运动，效果和各种幻觉方面有着悠久的历史，其目的是为他们的作品增添一层层次。 欧普运动在1960年代开始使用光学幻觉来给人一种运动印象。

从那时起，出现了越来越多的新方法，例如最近流行的动力学艺术 ，它通过使用多维运动来扩展观看者的视野。 运动也出现在计算机科学中，1967年发明了第一个闪烁的光标。

在前端开发中，DOM元素通常在CSS3发布之前由JavaScript制作动画 ，并且这种方法仍然有效，但是CSS3引入的新属性使我们能够 以更直观的方式 增强设计 ， 使其具有不同的效果和动作。

CSS3提供的两种主要技术是过渡和动画。 在这篇文章中，我们将研究它们的含义，它们之间的区别以及如何使用它们。

转场

状态更改可视化的最简单形式是将鼠标悬停在其上时更改按钮或链接的颜色。 发生这种情况时，元素的样式会略有不同，通常观众会注意到它好像在屏幕上移动了某些东西。

在悬停（或焦点或单击）上更改链接CSS属性是最古老，最简单的过渡形式，它早在CSS3时代就已存在。

a {
	color: orange;
}
a:hover {
	color: red;
}
a:focus {
	color: blue;
}
a:visited {
	color: green;
}

当HTML元素从一种预定义状态变为另一种预定义状态时，将使用过渡。 CSS3引入了新的属性，这些属性允许比以前更复杂的可视化，例如计时功能或持续时间控制 。

在理解动画之间的差异之后，我们将在下一部分中查看新CSS属性。 现在，让我们看一下您需要了解的有关转换的最重要的事情。

1. 他们总是有一个开始状态和一个结束状态。
2. 起点和终点之间的状态由浏览器隐式定义，我们无法使用CSS进行更改。
3. 它们需要显式触发 ，例如通过CSS添加新的伪类，或通过jQuery添加新的类。

您可以在下面看到一个巧妙利用CSS3过渡的美丽示例，在该示例中，作者以一种非侵入性的方式显示隐藏的信息，但仍可以引导用户将注意力集中在新内容上。

动画制作

如果我们想以更复杂的动作来可视化状态变化，或者没有明确的触发器（例如，如果我们想在页面加载时开始效果），则可以使用动画 。

通过设置和配置自己的keyframes动画使定义更复杂的路径成为可能。 Keyframes是动画过程中的中间点，它使我们可以根据需要多次更改动画元素的样式。

尽管CSS3提供了构建复杂动画的好方法，但是创建它们通常比过渡更难，这就是为什么那里有许多出色的动画库可以帮助我们进行工作的原因。

您需要了解的有关CSS3动画的最重要的事情包括：

1. 它们不需要显式触发，它们可以在页面加载或浏览器中发生另一个DOM事件时启动
2. 它们可以在使用过渡的情况下使用，例如在添加或删除新类或伪类的情况下（尽管使用频率较低）
3. 他们要求我们定义一些关键帧（中间状态）
4. 我们可以指定这些关键帧的数量，频率和样式

在下面的示例中，您可以看到一个很酷的动画下拉菜单。 当我们单击按钮时动画开始。 这是通过在click事件发生时使用jQuery向列表元素添加额外的类来实现的。

这些新类在CSS文件中使用指定的@keyframes规则进行动画处理。 当用户下次单击按钮时，jQuery将删除多余的类，并且菜单再次变为隐藏。

CSS属性和

对于过渡，我们可以使用transition速记属性，也可以使用4个与过渡相关的单个属性： transition-property ， transition-duration ， transition-timing-function和transition-delay 。 简写属性以缩写形式包含所有单个属性。

对于动画 ，我们拥有animation速记属性，它代表了不少于8个单个动画属性，即animation-name ， animation-duration ， animation-timing-function ， animation-delay ， animation-iteration-count ， animation-direction ， animation-fill-mode和animation-play-state 。

过渡和动画最重要的是，我们总是需要指定在状态更改期间将被修改CSS属性 。 进行过渡后，它看起来像这样：

.element {
	background: orange;
	transition-property: background;
	transition-duration: 3s;
	transition-timing-function: ease-in;
}
.element:hover {
	background: red;
}

我们指定了background属性，因为这是过渡期间将要更改的内容。

我们可以在一个过渡中更改多个CSS属性，在这种情况下，上面的代码将像这样修改： transition-property: background, border; 。 我们还可以使用transition-property: all; ，如果我们不想分别指定每个属性。

我们也可以选择速记transition属性。 如果这样做，我们总是需要注意内部属性的正确顺序（请参阅docs中的语法）。

.element {
	background: orange;
	transition: background 3s ease-in;
}
.element:hover {
	background: red;
}

如果要创建动画，则需要指定相关的keyframes 。 需要在单独定义的@keyframes at-rules中修改CSS属性。 以下是我们如何执行此操作的示例：

.element {
	position: relative;
	animation-name: slide;
	animation-duration: 3s;
	animation-timing-function: ease-in;
}
@keyframes slide {
	0% {
		left: 0;
	}
	50% {
		left: 200px;
	}
	100% {
		left: 400px;
	}
}

在上面的示例中，我们创建了一个非常简单的滑动效果。 我们定义了animation-name ，然后将其绑定到我们在@keyframes slide { ... }中指定的3个关键帧。 百分比是指动画的持续时间，因此本例中50％发生在1.5秒。

我们也可以使用简写animation属性，也可以按照以下方式使用from {} to {}规则来定义关键帧：

.element {
	position: relative;
	animation: slide 3s ease-in;
}
@keyframes slide {
	from {
		left: 0;
	}
	to {
		left: 400px;
	}
}

制作更复杂的动画是它自己的艺术形式，如果您有兴趣，可以阅读我们的两个动画教程，以了解如何创建高级字幕以及如何创建弹跳效果 。

在构建转场和动画时，您需要知道并非所有CSS属性都可以设置动画 ，因此在CSS Animatable中检查要更改的属性始终是一个好主意。

CSS3动画和过渡已经很长时间与供应商前缀一起使用了，我们不再需要使用它，但是Mozilla开发人员网络仍建议您暂时添加-webkit前缀，因为仅支持基于Webkit的浏览器最近取得了稳定。

翻译自: https://www.hongkiat.com/blog/visualizing-change-css-transitions-animations/