CSS Como usar transition no html/css ?

edupessoa1 · 28 de agosto de 2021

estou com dificuldade para usar transition no html/css ..

<!DOCTYPE html>

<html lang="pt-br">

<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">

    <title>Meu Teste</title>

    <link rel="stylesheet" href="assets/css/style.css"></link>

</head>

<body class="main-bg" >

   <aside class="menu white-bg">

    

    <section class="main-content menu-content">   

    

        <h1><a href="#">Logo</a></h1>

       <nav>

           <ul>

               <li><a href="#">Meus projetos</a></li>

               <li><a href="#">E-mail</a></li>

               <li><a href="#">Whatsapp</a></li>

               <li><a href="#">LinkedIn</a></li>

               <li><a href="#">Curriculum</a></li>



           </ul>

       </nav>

   

</section>

</aside>



<section class="section"></section>

<section class="section"></section>

</body>

</html>

--- css---

:root {

    --primary-color: #542883;

    --secodary-color: red;

    --white-color : #fff ;

    --gap: 3rem;

    --lith-gray-golor: #eee;

}




*{

    margin: 0;

    padding: 0;

}



body {

    font-family: 'Times New Roman', Times, serif;

    font-size: 2rem;

    color:var(--primary-color);

   

}



h1, h2, h3, h4, h5, h6 {

    font-family: sans-serif;

}



h1 {

    font-size: 4rem;

  }



  h2 {

    font-size: 3.6rem;

  }



  h3 {

    font-size: 3.4rem;

  }



  h4 {

    font-size: 3.2rem;

  }



  h5 {

    font-size: 3rem;

  }



  h6 {

    font-size: 2.8rem;

  }



a {

    text-decoration: none;

}



.main-bg {

    background-color: #542883;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%2367348c' points='1600 160 0 460 0 350 1600 50'/%3E%3Cpolygon fill='%23763d95' points='1600 260 0 560 0 450 1600 150'/%3E%3Cpolygon fill='%2384459e' points='1600 360 0 660 0 550 1600 250'/%3E%3Cpolygon fill='%23904ca5' points='1600 460 0 760 0 650 1600 350'/%3E%3Cpolygon fill='%239C53AD' points='1600 800 0 800 0 750 1600 450'/%3E%3C/g%3E%3C/svg%3E");

    background-attachment: fixed;

    background-size: cover;

    background-position: center center;

    color: var(--white-color);

}



.white-bg{

 background: var(--white-color);

}



.main-content {

    max-width: 120rem;

    margin: 0 auto;

    padding: var(--gap);



}



.section {

    min-height: 100vh;

}



.menu {

    position:fixed;

    top: 0 ;

    left : 0 ;

    right: 0;

    width: 100%;

    border-bottom: 0.1rem solid var(--lith-gray-golor);

}



.menu-content {

    display: flex;

    justify-content :space-between;

    align-items: center;

    padding-top: 0;

    padding-bottom: 0;

}




.menu h1 {

    font-size: 2.3rem;

    color:var(--primary-color);

}



.menu h1 a{

    color:inherit;

}




.menu ul  {

    list-style: none;

    display:flex;



}



.menu ul li a {

    

    display: block;

    padding: 2rem;

    font-size: 1.8rem;

    color:var(--primary-color);

    position: relative;



}



.menu ul li a::after {

    

 content: '';

 position: absolute;

 bottom: 1rem;

 left: 50%;

 width: 0;

 height: 0.2rem;

 background:var(--secodary-color);

 transition-delay: 1s;

}



menu ul li a :hover::after{



    width: 50%;

    left: 25%;

}

washalbano · 29 de agosto de 2021

Olá!
Li a questão e não entendi.
Li o código e não entendi onde a questão está.
Copiei localmente e executei e não entendi.

Afinal, onde o sr. quer usar transition?
Se puder, me ajude a entender.

edupessoa1 · 1 de setembro de 2021

@washalbano era na questão de colocar o mouse em cima do menu e ele ter um efeito, o que não estava acontecendo, apaguei tudo e fiquei tentando fazer ate funcionar, acabou funcionando, valeu por tentar ajudar