Моя индивидуальная анимация перехода CSS не работает над парижкой после того, как я добавил библиотеку AOS JS ⇐ Jquery

[Anonymous]

Я новичок. Я пытаюсь сделать веб -страницу для практики. Я добавил библиотеку JS под названием «AOS (анимация на свитке)». Библиотека работает нормально, но после добавления библиотеки моя пользовательская анимация перехода CSS не работает. class = "Snippet-Code">

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

AOS.init();
daisyjs(document.getElementById('daisy'), {
dotColor: '#000',
lineColor: '#000'
});
var typed = new Typed('.strings', {
strings: [
'Web Developer',
'Front-End Developer',
'Back-End Developer',
'Programmer'
],
loop: true,
typeSpeed: 60,
backSpeed: 20,
});< /code>
.container {
width: 90%;
max-width: 1080px;
margin: auto;
padding: 5rem 0;
line-height: 1.5;
}
.sh {
text-align: center;
margin: 0 auto 3.5rem;
}
.sh-t {
font-size: 45px;
}
.sh-st {
margin-top: 0.8rem;
font-size: 22px;
font-weight: 500;
color: #2c3e50;
}
.btn-g {
color: black;
background: gold;
border: 2px solid gold;
font-weight: bold;
border-radius: 30px;
padding: 0.75rem 1.5rem;
cursor: pointer;
transition: all 0.5s ease;
}
.btn-g:hover {
padding: 0.75rem 2.5rem;
}
.btn-b {
color: white;
background: #000;
border: 2px solid #000;
font-weight: bold;
border-radius: 30px;
padding: 0.75rem 1.5rem;
cursor: pointer;
transition: all 0.5s ease;
}
.btn-b:hover {
padding: 0.75rem 2.5rem;
}
a {
text-decoration: none;
}
i {
font-size: 25px;
transition: all 0.4s ease;
}
i:hover {
color: gold;
}
.gold {
color: gold;
}
.white {
color: white;
}
.black {
color: black;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
}
html {
scroll-behavior: smooth;
}
/* --------------- Header --------------- */
header {
width: 100%;
min-height: 100vh;
}
.cover {
background-color: gold;
height: 10rem;
}
.box {
text-align: center;
margin-top: -6.5rem;
position: relative;
}
.box > img {
width: 200px;
border-radius: 50%;
cursor: pointer;
border: 5px solid gold;
}
.name {
font-size: 60px;
margin-bottom: 1rem;
}
.strings {
color: gold;
}
.btn-box {
margin: 5rem 0 3rem;
}
.icon-box {
margin-bottom: 3rem;
}
.social-icon {
margin: 0 5px;
font-size: 20px;
color: #000;
}
/* --------------- Experience --------------- */
#experience {
background-color: #000;
text-align: center;
font-weight: bold;
color: #fff;
}
.experience-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 3rem;
}
.experience-1 section {
border: 3px solid gold;
border-radius: 5px;
padding: 1rem 0.5rem;
transition: all 0.5s ease;
}
.experience-1 section:hover {
background: gold;
color: #000;
padding: 0 0.7rem;
cursor: pointer;
}
.experience-1 section h1 {
color: gold;
margin: 1rem 0 0.5rem 0;
}
.experience-1 section:hover > h1 {
color: #000;
}
.experience-1 i {
font-size: 50px;
color: gold;
}
.experience-1 section:hover >  i {
color: #000;
}
/* --------------- Works --------------- */
#works {
background: gold;
}
.work {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5rem;
text-align: center;
margin-top: 3rem;
margin-bottom: 3rem;
transition: all 0.5s ease;
}
.work:hover {
box-shadow: 0 0 20px black;
}
.work-info {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.work-info h1 {
font-size: 30px;
}
.work-image img {
display: block;
width: 100%;
cursor: pointer;
}
/* --------------- Work With Me --------------- */
#wwm {
background-color: #000;
}
.n-e {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 3rem;
}
.input-area {
font-size: 18px;
padding: 10px;
background-color: #ecf0f1;
border: transparent;
outline: none;
border-radius: 5px;
}
.textarea {
display: block;
width: 100%;
margin: 2rem 0;
}
.submit-btn {
color: black;
font-size: 18px;
font-weight: 500;
background: gold;
border: 2px solid gold;
border-radius: 30px;
padding: 0.7rem 3rem;
cursor: pointer;
display: block;
margin: auto;
transition: all 0.3s ease;
}
.submit-btn:hover {
padding: 0.7rem 4rem;
}
.send-btn {
font-size: 20px;
}
.send-btn:hover {
color: inherit;
}
/* --------------- Footer --------------- */
footer {
background-color: gold;
padding: 3rem 0;
color: #000;
font-size: 18px;
text-align:  center;
}< /code>






[*]








Dabananda Mitra | Web Developer








[i]
Hi, I'm Dabananda Mitra
I'm a 

[url=#]DOWNLOAD CV[/url]

[url=https://www.facebook.com/dabananda.mitra.98/]
[/i]
[/url]
[url=https://twitter.com/dabanandamitra]
[i][/i]
[/url]
[url=https://www.instagram.com/dabananda.mitra/]
[i][/i]
[/url]
[url=https://www.linkedin.com/in/dabananda-mitra-001a901b0/]
[i][/i]
[/url]








My Experience
Specialist in need.  Generalist at heart.


[i][/i]
Front-end
[list]
HTML
[*]CSS
[*]JavaScript
[*]Bootstrap
[*]jQuery
[*]React Js
[/list]


[i][/i]
Backend-end
[list]
[*]Node Js
[*]MONGODB
[*]MySql
[*]Flusk
[*]DGango
[*]Laravel
[/list]


[i][/i]
Programming
[list]
[*]C
[*]C++/Cpp
[*]Java
[*]Python
[*]JavaScript
[*]GO
[/list]


[i][/i]
Tools
[list]
[*]Visual Studio Code
[*]Git
[*]PyCharm
[*]CLion
[*]IntellijIDEA
[*]WebStorm
[/list]








My Works
Here are few of my former clients


CURABITUR TECH
Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.
[url=#]VISIT WEBSITE[/url]

[i]


[img]./images/works/two.jpg[/img]


CURABITUR TECH
Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.
[url=#]VISIT WEBSITE[/url]



CURABITUR TECH
Curabitur Tech is id eros nisl. Cras id bibendum dolor.  Quisque ultrices posuere ante sit amet varius.
[url=#]VISIT WEBSITE[/url]


[img]./images/works/three.jpg[/img]



[img]./images/works/four.jpg[/img]


CURABITUR TECH
Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.
[url=#]VISIT WEBSITE[/url]



CURABITUR TECH
Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.
[url=#]VISIT WEBSITE[/url]


[img]./images/works/five.jpg[/img]








Wanna work with me?
I'm currently available for work.







[/i] SEND





Copyright © 2021 | [url=https://www.facebook.com/dabananda.mitra.98/]Dabananda Mitra[/url]

Как я могу включить переход, чтобы анимация «AOS» и мой добавленный переход работал нормально?

Подробнее здесь: https://stackoverflow.com/questions/681 ... ded-aos-js