Die Animation der Folie funktioniert nicht zur gleichen Zeit, wie es in der Animation in reinem HTML und CSS verblasst ⇐ HTML

HTML-Programmierer
Post Reply Previous topicNext topic
Anonymous
 Die Animation der Folie funktioniert nicht zur gleichen Zeit, wie es in der Animation in reinem HTML und CSS verblasst

Post by Anonymous »

Die Fade in Animation für die Navi -Schaltflächen funktionieren gut, aber die Animation der Folie funktioniert nicht? Wie mache ich sie beide Animationen? Vielleicht ist es Konflikt, aber ich sehe nicht wirklich, wo, ich möchte, dass die Navigationsstoffe aufrutschen, wenn es verblasst und die beabsichtigte Position in der Navigationsleiste erreicht. Danke < /p>


>

Code: Select all

@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]

&copy;2025 JezreelHub. ALL RIGHTS RESERVED.
Top
Post Reply Previous topicNext topic

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML”