My custom CSS transition animation is not working on hover after I added AOS JS library

Question

I am beginner. I am trying to make a webpage for practicing. I have added a js library called "AOS (animation on scroll)". The library is working fine but after adding the library my custom CSS transition animation is not working.

Tracking: HTML Line: 110 (work Div), CSS Line: 156 (.work selector)

My codes

 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, });

 .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; } .ne { 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; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="./images/dabananda-mita-portfolio-02-favicon.png"> <!-- AOS --> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/> <!-- FontAwesome Icon CDN --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <!-- Google font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet"> <title>Dabananda Mitra | Web Developer</title> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/styles.css"> <link rel="stylesheet" href="./css/responsive.css"> </head> <body> <!-- --------------- Header --------------- --> <header> <div class="cover" id="daisy"></div> <div class="box"> <img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fhtmlcolorcodes.com%2Fassets%2Fimages%2Fhtml-color-codes-color-palette-generators.jpg&imgrefurl=https%3A%2F%2Fhtmlcolorcodes.com%2F&tbnid=7WSDwltCxmjyjM&vet=12ahUKEwi8k9ryr7PxAhWDY30KHUTaBCkQMygGegUIARDdAQ..i&docid=8gxp2CxZ1O5iYM&w=1440&h=900&q=color&hl=en&client=firefox-bd&ved=2ahUKEwi8k9ryr7PxAhWDY30KHUTaBCkQMygGegUIARDdAQ"> <h1 class="name">Hi, I'm Dabananda Mitra</h1> <h1 class="sub-name">I'm a <span class="strings"></span></h1> <div class="btn-box"> <a href="#" class="btn-g">DOWNLOAD CV</a> </div> <div class="icon-box"> <a href="https://www.facebook.com/dabananda.mitra.98/" class="social-icon" target="_blank"> <i class="fab fa-facebook"></i> </a> <a href="https://twitter.com/dabanandamitra" class="social-icon" target="_blank"> <i class="fab fa-twitter"></i> </a> <a href="https://www.instagram.com/dabananda.mitra/" class="social-icon" target="_blank"> <i class="fab fa-instagram"></i> </a> <a href="https://www.linkedin.com/in/dabananda-mitra-001a901b0/" class="social-icon" target="_blank"> <i class="fab fa-linkedin"></i> </a> <!-- <a href="https://github.com/dabananda" class="social-icon"> <i class="fab fa-github"></i> </a> --> </div> </div> </header> <!-- --------------- My Experience --------------- --> <div id="experience" data-aos="fade-up" data-aos-duration="1000"> <div class="container"> <div class="sh"> <h class="sh-t gold">My Experience</h> <p class="sh-st white">Specialist in need. Generalist at heart.</p> </div> <div class="experience-1"> <section class="br"> <i class="fas fa-laptop-code"></i> <h1>Front-end</h1> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Bootstrap</li> <li>jQuery</li> <li>React Js</li> </ul> </section> <section class="br"> <i class="fas fa-server"></i> <h1>Backend-end</h1> <ul> <li>Node Js</li> <li>MONGODB</li> <li>MySql</li> <li>Flusk</li> <li>DGango</li> <li>Laravel</li> </ul> </section> <section class="br"> <i class="fas fa-code"></i> <h1>Programming</h1> <ul> <li>C</li> <li>C++/Cpp</li> <li>Java</li> <li>Python</li> <li>JavaScript</li> <li>GO</li> </ul> </section> <section class="br"> <i class="fas fa-cogs"></i> <h1>Tools</h1> <ul> <li>Visual Studio Code</li> <li>Git</li> <li>PyCharm</li> <li>CLion</li> <li>IntellijIDEA</li> <li>WebStorm</li> </ul> </section> </div> </div> </div> <!-- --------------- Works --------------- --> <div id="works" data-aos="fade-up" data-aos-duration="1000"> <div class="container"> <div class="sh"> <h1 class="sh-t">My Works</h1> <p class="sh-st ">Here are few of my former clients</p> </div> <div class="work" data-aos="fade-right" data-aos-duration="1000"> <section class="work-info"> <h1>CURABITUR TECH</h1> <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p> <a href="#" class="btn-b">VISIT WEBSITE</a> </section> <section class="work-image"><img src="./images/works/one.jpg" alt=""></section> </div> <div class="work" data-aos="fade-left" data-aos-duration="1000"> <section class="work-image"><img src="./images/works/two.jpg" alt=""></section> <section class="work-info"> <h1>CURABITUR TECH</h1> <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p> <a href="#" class="btn-b">VISIT WEBSITE</a> </section> </div> <div class="work" data-aos="fade-right" data-aos-duration="1000"> <section class="work-info"> <h1>CURABITUR TECH</h1> <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p> <a href="#" class="btn-b">VISIT WEBSITE</a> </section> <section class="work-image"><img src="./images/works/three.jpg" alt=""></section> </div> <div class="work" data-aos="fade-left" data-aos-duration="1000"> <section class="work-image"><img src="./images/works/four.jpg" alt=""></section> <section class="work-info"> <h1>CURABITUR TECH</h1> <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p> <a href="#" class="btn-b">VISIT WEBSITE</a> </section> </div> <div class="work" data-aos="fade-right" data-aos-duration="1000"> <section class="work-info"> <h1>CURABITUR TECH</h1> <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p> <a href="#" class="btn-b">VISIT WEBSITE</a> </section> <section class="work-image"><img src="./images/works/five.jpg" alt=""></section> </div> </div> </div> <!-- --------------- Work-With-Me --------------- --> <section id="wwm" data-aos="fade-up" data-aos-duration="1000"> <div class="container"> <div class="sh"> <h1 class="sh-t gold">Wanna work with me?</h1> <p class="sh-st white">I'm currently available for work.</p> </div> <form class="contact-form"> <div class="ne"> <input class="input-area" type="text" placeholder="Full Name" required> <input class="input-area" type="email" placeholder="Email Address" required> </div> <textarea class="textarea input-area" rows="6" placeholder="Write your query here"></textarea> <button type="submit" class="submit-btn"><i class="fas fa-paper-plane send-btn"></i> SEND</button> </form> </div> </section> <!-- --------------- Footer --------------- --> <footer> <p>Copyright &copy; 2021 | <a href="https://www.facebook.com/dabananda.mitra.98/" class="black" target="_blank">Dabananda Mitra</a></p> </footer> <!-- --------------- Daisy --------------- --> <script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.min.js"></script> <script src="./plugins/daisy.js"></script> <!-- --------------- Typed --------------- --> <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> <script src="./plugins/typed.js"></script> <!-- --------------- AOS --------------- --> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script src="./plugins/aos.js"></script> <!-- --------------- Main Js --------------- --> <script src="./main.js"></script> </body> </html>

How can I enable the transition so that the "AOS" animation and my added transition both works fine?

Answer 1

AOS already uses transitions. To make it work I would introduce additional tag with work class.

<div data-aos="fade-right" data-aos-duration="1000">
<div class="work">
    <section class="work-info">
        <h1>CURABITUR TECH</h1>
        <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p>
        <a href="#" class="btn-b">VISIT WEBSITE</a>
    </section>
    <section class="work-image"><img src="./images/works/one.jpg" alt=""></section>
</div> 
</div>

Answer 2

You will need style attribute

just you need to add this to your element : style="transition:your-transitions;"

example

<div data-aos="fade-up" style="transition:0.7s;"></div>