我正在尝试使用HTML/CSS添加一些悬停动画来制作这一侧导航栏。当你将鼠标悬停在一个图标上时，它将缩放为两倍，导航条中的其他项目将分散。但我的问题不在于此，因为我已经使用javascript和CSS实现了动画。问题是动画在反方向上不能顺利地工作。所以我试图添加简短的CSS动画来检查反向动画过渡是否正常工作，它不是。
下面是我的CSS代码:ul{
list-style: none;
}
.navmenu{
position: fixed;
top: 50%;
transform: translateY(-50%);
}
.navmenu ul{
padding-left: 40px;
position: relative;
}
.navmenu ul li {
padding: 15px 0;
}
.navmenu ul li a{
text-decoration: none;
position: relative;
font-size: 1.8rem;
font-weight: 900;
}
.navmenu ul li a i{
-webkit-transition: all 2s ease-in;
transition: all 2s ease-in;
}
.navmenu ul li a:hover i{
-webkit-animation: slide-out-top 0.2s ease-out both;
animation: slide-out-top 0.2s ease-out both;
color: orange;
}
@-webkit-keyframes slide-out-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
100% {
-webkit-transform: scale(0.8,0.8) translateY(-60px);
transform: scale(0.8,0.8) translateY(-60px);
}
}
@keyframes slide-out-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
100% {
-webkit-transform: scale(0.8,0.8) translateY(-60px);
transform: scale(0.8,0.8) translateY(-60px);
}
}
下面是它的HTML代码:
<nav class="navmenu">
<ul>
<li><a href="#home" class=""><i class="fas fa-home"></i><span>Home</span></a></li>
<li><a href="#projects" class=""><i class="fas fa-laptop-code"></i><span>Projects</span></a></li>
<li><a href="#skills" class=""><i class="fas fa-code"></i><span>Skills</span></a></li>
<li><a href="#training" class=""><i class="fas fa-dumbbell"></i><span>Training</span></a></li>
<li><a href="#education" class=""><i class="fas fa-user-graduate"></i><span>Education</span></a>
</li>
<li><a href="#contact_me" class=""><i class="far fa-address-book"></i><span>Contact me</span></a>
</li>
</ul>
</nav>
https://codepen.io/naveen444/pen/zYooJzd?编辑= 1100
我在网上读到动画和过渡是不同的，过渡可以逆转，但不是动画，但我以前使用过CSS动画，我记得过渡:所有的2s;可以反转所有的过渡顺利。如果我说错了什么，请原谅。我在这方面是一个绝对的初学者，请纠正我。
您可以在hover上添加transform: scale(0.8) translateY(-60px);，而不是添加animation。我已经改变了以下css和分支你的codependency。
.navmenu ul li a i{
position: relative;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
color: orange;
}
.navmenu ul li a:hover i{
-webkit-transform: scale(0.8) translateY(-60px);
transform: scale(0.8) translateY(-60px);
color: orange;
}
下面也是代码片段。
body {
background: black;
}
ul {
list-style: none;
}
.navmenu {
position: fixed;
top: 50%;
transform: translateY(-50%);
}
.navmenu ul {
padding-left: 40px;
position: relative;
}
.navmenu ul li {
padding: 15px 0;
}
.navmenu ul li a {
text-decoration: none;
position: relative;
font-size: 1.8rem;
font-weight: 900;
}
.navmenu ul li a span {
font-size: 1rem;
padding-left: 20px;
color: orange;
/* transition: all 0.1s; */
font-weight: 600;
display: none;
}
.navmenu ul li a i {
position: relative;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
color: orange;
}
.navmenu ul li a:hover i {
-webkit-transform: scale(0.8) translateY(-60px);
transform: scale(0.8) translateY(-60px);
color: orange;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<nav class="navmenu">
<ul>
<li><a href="#home" class=""><i class="fas fa-home"></i><span>Home</span></a></li>
<li><a href="#projects" class=""><i class="fas fa-laptop-code"></i><span>Projects</span></a></li>
<li><a href="#skills" class=""><i class="fas fa-code"></i><span>Skills</span></a></li>
<li><a href="#training" class=""><i class="fas fa-dumbbell"></i><span>Training</span></a></li>
<li><a href="#education" class=""><i class="fas fa-user-graduate"></i><span>Education</span></a></li>
<li><a href="#contact_me" class=""><i class="far fa-address-book"></i><span>Contact me</span></a></li>
</ul>
</nav>
</body>这些不是经典的过渡，这些是关键帧动画。使用纯CSS，你可以这样做;
.intern {
-webkit-animation: in 1s;
}
.intern:hover {
-webkit-animation: out 1s;
}
@-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg);}
}
@-webkit-keyframes out {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}<div style = "width : 100px; height : 100px; background-color : red" class ="intern"></div>运行代码片段，你会发现它在鼠标离开时执行动画。
请查看下面的代码链接希望它对你有用。
你可以在导航栏图标上使用过渡属性，使用transform和transition属性，而不使用animation和@-webkit-keyframes。
请参考此链接:https://jsfiddle.net/yudizsolutions/zpL3yc4n/
您可以使用类样式定义您的before和after状态，并使用事件侦听器添加/删除这些类。一种状态将具有鼠标over侦听器，而另一种状态将具有鼠标离开侦听器。然后你需要使用css来定义你的before和after状态。然后将@keyframes规则添加到这些特定的类中。
例如，您有一个类我们可以在状态#icon之前将其称为。然后你有一个类那就是hover状态slidein。将此样式设置为您希望动画完成其渐变时的状态。在@keyframes规则中为特定类设置动画参数。然后为mouseout状态设置另一个类，该类具有在元素返回其原始状态后的外观的特定样式。根据鼠标移到上的元素状态添加@keyframes规则。最后，使用setTimeout删除mouseout状态类与动画计时持续时间一致。
我在元素的父元素上添加了一个黄色的BG来说明悬停触发eventlistener和动画元素之间的关系。
const icon = document.querySelectorAll('.icon')
const animate = (el, duration) => {
const root = document.documentElement;
// conditional that sets the CSS variable to the duration called in your function
// using the css :root element, checks if the duration is over one second and
// formats the root variable to seconds/milliseconds accordingly
if (`${duration}`.length > 3) {
let whole = `${duration}`.slice(0, `${duration}`.length - 3);
root.style.setProperty('--duration', `${whole}s`);
} else {
root.style.setProperty('--duration', `.${duration}s`);
}
el.forEach((node) => {
node.addEventListener('mouseenter', (e) => {
node.children[0].classList.add('slidein');
})
node.addEventListener('mouseleave', (e) => {
node.children[0].classList.add('slideout');
node.children[0].classList.remove('slidein');
setTimeout(() => {
node.children[0].classList.remove('slideout')
}, duration)
})
})
console.log(root)
}
animate(icon, 650):root {
--top-pos: -30px;
--duration: 0.7s;
--scale-to: scale(0.6)
}
#parent {
margin-top: 30px;
height: 50px;
width: 50px;
}
.icon img {
width: 50px;
height: 50px;
}
.icon {
margin: 10px 0;
background: yellow;
}
.slidein {
animation: slidein var(--duration) ease-out;
position: relative;
top: var(--top-pos);
transform: var(--scale-to);
}
.slideout {
animation: slideout var(--duration) ease-out;
position: relative;
transform: var(--scale-to);
top: 0px;
}
@keyframes slidein {
0% {
top: 0px;
transform: scale(1);
}
100% {
top: var(--top-pos);
transform: var(--scale-to);
}
}
@keyframes slideout {
0% {
top: var(--top-pos);
transform: var(--scale-to);
}
100% {
top: 0px;
transform: scale(1);
}
}<div id="parent">
<div class="icon">
<img src="https://nextgate.com/wp-content/uploads/2018/02/icon-implementation.png">
</div>
<div class="icon">
<img src="https://res.cloudinary.com/logrhythm/image/upload/c_scale,w_175/v1519675460/icons/training-advanced-admin-icon.png">
</div>
<div class="icon">
<img src="http://haltin.com.tr/wp-content/uploads/2015/12/icon_integrity-6.png">
</div>
<div class="icon">
<img src="http://www.stephensre.com/images/icons-selling/icon-inspect.png">
</div>
</div>