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属性。 现在，让我们看一下您需要了解的有关转换的最重要的事情。