Анимация скольжения не работает в то же время, что и FADE в анимации в чистом HTML и CSS ⇐ Html

[Anonymous]

Fade in Animation для кнопок Navbar работает хорошо, но анимация Slide Up не работает? Как заставить их сделать обе анимации. Может быть, это конфликт, но я действительно не вижу, где, я хочу, чтобы элементы Navbar скользили - вверх, когда они исчезают и достигают предполагаемой позиции на Navbar, я попытался сделать его на более низком значении Y, а затем достиг исходной позиции с ключами, но это не работает, но у Fade в работах, и они находятся в одной ключевой плане, поэтому я не знаю, почему он не работает, на консоле нет ошибков, в консоли, как на этом? Спасибо < /p>

Код: Выделить всё

@font-face {
font-family: myFont;
src: url(bold.ttf);
}

header {
background-color: #293454;
font-family: myFont;
width: 100%;
margin: 0px;
padding: 15px;
top: 0;
box-sizing: 100px;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1000;
}

.logo {
font-family: myFont;
font-size: 40px;
color: #F1E6D2;
}

.logo {

font-family: myFont;
font-size: 40px;
color: #F1E6D2;
margin: 10px;
margin-top: 15px;
padding: 0;
text-shadow: 0 0 10px;
cursor: pointer;
transition: 0.4s ease-in-out;

}

.logo:hover {

text-shadow:
0 0 10px #F1E6D2,
0 0 20px #F1E6D2,
0 0 30px #F1E6D2;
transform: scale(1.1);

}

.logo span {

color: #ffffff;
transition: 0.4s ease-in-out;

}

.logo span:hover {

color: #F1E6D2;

}

body {

background-color: #F1E6D2;
;

}

nav ul {

margin-top: 28px;
padding: 0;
list-style: none;
z-index: 1;
}

nav ul li {

display: inline;
margin: 0 15px;
margin-right: 50px;
z-index: 1;

}

nav ul li a {

color: #F1E6D2;
font-size: 20px;
text-decoration: none;
transition: 0.5s ease-in-out;
z-index: 1;

}

nav ul li a:hover,
nav ul li a:active {

border-bottom: 3px solid #F1E6D2;
border-radius: 1px;

}

/* Ensure [*] elements are positioned */
nav ul li {
position: relative;
/* Ensure the transform works */
animation: transform2 1s ease forwards;
opacity: 0;
}

/* Delay applied to each  to make the animation more staggered */
nav ul li:nth-child(1) {
animation-delay: 0.2s;
}

nav ul li:nth-child(2) {
animation-delay: 0.4s;
}

nav ul li:nth-child(3) {
animation-delay: 0.6s;
}

nav ul li:nth-child(4) {
animation-delay: 0.8s;
}

nav ul li:nth-child(5) {
animation-delay: 1s;
}

@keyframes transform2 {
0% {
transform: translateY(-50px);
opacity: 0;
}

100% {
transform: translateY(0);
/* This moves the   elements up */
opacity: 1;
}
}

/* old code mo HAHAHAHAH
nav ul li:nth-child(1) {

animation: transform2 1s ease forwards 0.2s;

}

nav ul li:nth-child(2) {

animation: transform2 1s ease forwards 0.4s;

}

@keyframes transform2 {

0% {
transform: translateY(-1000px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}

}
*/
.intro {

color: #293454;
font-family: myFont;
font-size: 30px;
animation: fadeIn 2s ease-in, transform1 2s ease-in;
padding-top: 300px;

}

@keyframes transform1 {
0% {
opacity: 0%;
transform: translateY(-100px);
}

100% {
opacity: 100%;
transform: translateY(0px);
}

}

.nyak {
color: #293454;
overflow: hidden;
white-space: nowrap;
font-family: myFont;
font-size: 15px;
font-weight: lighter;
animation: typing 5s steps(51),
blink 1s infinite, transform 5s;
border-right: 4px solid #293454;
width: 51ch;
margin-top: 20px;
margin-left: 640px;
}

@keyframes typing {
0% {
width: 0ch;
}

100% {
width: 51ch
}

}

@keyframes blink {
50% {
border-color: transparent;
}

}

@keyframes transform {
0% {
transform: translateX(-800px);
}

100% {
transform: translateX(0px);
}

}

.arrow {

margin-top: -1500px;
rotate: 90deg;
}

.arrow span {

color: #293454;
display: block;
width: 350px;
height: 350px;
margin-top: 300px;
border-top: 200px solid #293454;
border-left: 200px solid #293454;
rotate: 45deg;
animation: animate 10s infinite alternate;
transition: ease-in-out;
z-index: 1000;
}

.arrow span:nth-child(1) {

animation-delay: -0.6s;

}

.arrow span:nth-child(2) {

animation-delay: -0.5s;

}

.arrow span:nth-child(3) {

animation-delay: -0.4s;

}

.arrow span:nth-child(4) {

animation-delay: -0.3s;

}

.arrow span:nth-child(5) {

animation-delay: -0.2s;

}

@keyframes animate {

0% {
opacity: 100%;
transform: translate(3000px, 3000px);
}

100% {
opacity: 0%;
transform: translate(-5000px, -5000px);
}

}

.circle1 {

background-color: #B8CEEB;
border-radius: 200px;
width: 150px;
height: 150px;
margin-top: -3000px;
margin-left: 110px;
margin-bottom: 100px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate1 2s infinite alternate ease-in-out;
;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;

}

.circle1:hover {

transform: translateX(100px);

}

.circle2 {

background-color: #B8CEEB;
border-radius: 50px;
width: 80px;
height: 80px;
margin-left: 220px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate1 2s infinite alternate ease-in-out;
;
animation-delay: -0.2s;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;

}

.circle2:hover {

transform: translateX(120px);
rotate: 60deg;

}

.circle3 {

background-color: #B8CEEB;
border-radius: 100px;
width: 180px;
height: 180px;
margin-top: 100px;
margin-left: 50px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate1 2s infinite alternate ease-in-out;
;
animation-delay: -0.4s;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;

}

.circle3:hover {

transform: translateX(50px);
rotate: -40deg;

}

.circle4 {

background-color: #B8CEEB;
border-radius: 200px;
width: 150px;
height: 150px;
margin-top: -400px;
margin-left: 1500px;
margin-bottom: 150px;
box-shadow: 0 20px 30px #29345477;
animation:  float 1.5s infinite alternate ease-in-out, rotate2 2s infinite alternate ease-in-out;
;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;

}

.circle5 {

background-color: #B8CEEB;
border-radius: 200px;
width: 80px;
height: 80px;
margin-top: -460px;
margin-left: 1650px;
margin-bottom: 80px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate2 2s infinite alternate ease-in-out;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;

}

.circle6 {

background-color: #B8CEEB;
border-radius: 200px;
width: 180px;
height: 180px;
margin-top: 300px;
margin-left: 1600px;
margin-bottom: 100px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate2 2s infinite alternate ease-in-out;
;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;

}

@keyframes float {

100% {
transform: translateY(25px);
box-shadow: 0 20px 10px #29345477;

}

}

@keyframes rotate1 {

0% {
transform: rotate3d(0, 0, 0, 0deg);
}

100% {
transform: rotate3d(0, 0, 1, 360deg);
}

}

@keyframes rotate2 {

0% {
transform: rotate3d(0, 0, 1, 360deg);
}

100% {
transform: rotate3d(0, 0, 0, 0deg);
}

}

.profile-img {

border-radius: 30%;
margin-left: 50px;

}

.profile-img img {

position: relative;
margin-top: 800px;
left: 100px;
width: 20vw;
border-radius: 30%;
box-shadow: 0 0 50px #293454;
cursor: pointer;
transition: 0.3s ease-in-out;

}

.profile-img img:hover {

box-shadow: 0 0 50px #293454,
0 0 60px #293454,
0 0 70px #293454;

transform: scale(1.1);

}

.all-about {

margin-left: 200px;
margin-top: -1180px;

}

.about {

color: #293454;
font-family: myFont;
font-size: 60px;
margin-top: 0;
margin: 450px;
margin-bottom: -450px;
padding-top: 300px;

}

.aboutc {
margin-top: 0;
margin: 450px;
letter-spacing: 1.3px;
line-height: 30px;
margin-bottom: -500px;

}

h3 {

font-family: myFont;
font-size: 30px;
color: #293454;

}

.aboutc p {

font-family: myFont;
color: #293454;

}

.sticker2-img img {

width: 15vw;
position: relative;
margin-top: 200px;
margin-left: 1550px;
transition: 0.3s ease-in-out;
opacity: 0;

}

.sticker1-img img {

width: 15vw;
position: relative;
margin-top: -300px;
margin-left: 1430px;

}

.hover1 {

color: #293454;
font-family: myFont;
font-size: 20px;
margin-left: 1690px;
margin-top: -30px;
transition: 0.3s ease-in-out;
animation: fadeIn 5s forwards infinite;
animation-delay: 10s;
opacity: 0%;
}

@keyframes fadeIn {

0% {
opacity: 0%;
}

100% {
opacity: 50%;
}

}

.sticker2-img img:hover {

animation: slide 0.5s forwards;

}

@keyframes slide {

0% {
transform: translateX(0);
opacity: 0%;
}

100% {
transform: translateX(50px);
opacity: 100%;

}

}

footer {

color: #B8CEEB;
background-color: #293454;
font-family: myFont;
font-size: 15px;
padding: 10px;
margin-top:  1000px;

}

@media screen {}< /code>

JEZREELHUB

[list]
[url=#home]HOME[/url]
[*][url=#about]ABOUT[/url]
[*][url=#education]EDUCATION[/url]
[*][url=#skills]SKILLS[/url]
[*][url=#contact]CONTACT[/url]
[/list]



WELCOME TO MY PORTFOLIO WEBSITE

This is a website that showcases my portfolio as a junior programmer:)







[img]grad.jpg[/img]

ABOUT

 Hi! This is Jezreel!
 I am an introverted individual with an INTP personality type, identify as sp3 choleric phlegmatic. I have a strong inclination towards technology and a desire for continuous learning and skill development, although I do not achieve mastery in any particular area. I actively seek opportunities to step outside of my comfort zone to foster personal growth. My appreciation for uniqueness drives me to differentiate myself from others as much as possible. Moreover, I quickly adapt to diverse environments and learn rapidly, though I face challenges or difficulties with short-term memory retention.



[img]intpp.png[/img]

HOVER HERE

[img]intp.png[/img]

©2025 JezreelHub. ALL RIGHTS RESERVED.

Подробнее здесь: https://stackoverflow.com/questions/794 ... n-pure-htm