以下是我们将在本教程中构建的代码
项目设置
在这个项目中，我们将把过渡结果应用到一个class为box的元素上面。这个box元素内部是垂直和程度居中的笔墨内容。HTML构造相称简朴：
<div class='box'> <p>TEXT</p> </div>
CSS代码也一样简朴。我们想要运用无衬线字体，并确保div中的段落文本是白色的，可以经由历程以下代码来完成：
body {
color: white;
font-family: Helvetica, Sans-Serif;
}
别的，给box元素增加以下CSS属性：
.box {
width:200px; /* Set the Width of box */
height:50px; /* Set the Height of box */
background:#424242; /* Dark Grey Background color */
transition:all 0.25s ease; /* Transition settings */
display: flex; /* Use Flexbox on P */
align-items: center; /* Center P */
justify-content: center; /* Center P */
margin: 10px; /* Apply a margin around our Box */
}
不管你对CSS的过渡属性熟习与否，我们在这里都来扼要引见一下，一共分为三步。.第一步，我们须要将它应用到all变化的属性。接下来，设置过渡时长为0.25秒。末了，将动画函数选为ease。ease的表现状况就是起止历程比较迟缓，中心过渡敏捷。
holly high! 如今准备工作都已停当，接下来就是增加过渡结果了。到如今为止，div看起来应当像下面如许。
1.退色结果
起首，增加一个退色的过渡。新建一个div元素，并为它增加一个名为fade的类：
<div class='box fade'> <p>FADE HERE</p> </div>
接下来我们所须要做的就是为这个fade类指定悬停划定规矩。我们须要借助CSS伪类选择器:hover来完成这件事变。这个伪类选择器对一切的元素都有用，而且会在元素处于鼠标指针悬停状况下的时刻激活CSS声明。基于此，我们借助:hover选择器将div的透明度改成0.5：
.fade:hover {
opacity: 0.5;
}
简朴吧。上面这句CSS声明就为div指定了一个悬停结果。以下就是如今它展现的模样。而你之所以可以看到过渡款式，是因为我们一开始在名为box的类中运用了transition:all 0.25s ease;的声明。看下面，是否是一个还不错的退色结果：
2.来点色彩看看
指定一个变色过渡实在和退色过渡的历程殊途同归。起首，建立一个div元素，并为它增加一个名为color的类。
<div class='box color'> <p>COLOR HERE</p> </div>
同样地，我们也要借助:hover选择器来帮我们完成这件事，然则这一次我们不是转变透明度而是背景色：
.color:hover {
background: #FF5722;
}
以下就是实际结果了：
3.一同摇晃
接下来，来完成一个摆动的结果。这个结果完成起来比前面的两个例子稍显庞杂。在这个例子中，我会采纳@keyframes来完成。
@keyframes——给予你在一个CSS动画序列中掌握中心步骤的魔力。
起首照样一样，你一定已听烦了，建立一个div元素，并未它增加一个名为wiggle的类：
<div class='box wiggle'> <p>WIGGLE WIGGLE</p> </div>
接下来，我们要做的就是借助@keyframes来建立动画。我们先给动画起个名字，就叫wiggle吧。并在以下的代码中增加发抖结果的完成：
@keyframes wiggle {
20% { transform: translateX(4px); }
40% { transform: translateX(-4px); }
60% { transform: translateX(2px); }
80% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
从上面的代码已可以看出，@keyframes给予我们将动画分解成单步，而且准确定义每一步发生了什么的才能。经由历程百分比的体式格局指定动画的进度：
20%——div相对于初始位置右移4px。
40%——div相对于初始位置左移4px。
60%——div相对于初始位置右移2px。
80%——div相对于初始位置左移1px。
100%——div恢复到初始位置。
如今我们就可以借助:hover选择器来展现wiggle的动画了：
.wiggle:hover {
animation: wiggle 1s ease;
animation-iteration-count: 1;
}
我们将animation设置成wiggle。同时愿望动画延续1秒的时长，采纳ease的动画结果。
末了，就是指定动画在每次鼠标指针悬停的时刻触发一次。
下图就是终究的动画结果：
以上就是应用CSS完成一个悬停过渡动画的项目（超等简朴）的细致内容，更多请关注ki4网别的相干文章！
