How can I add transitions to CSS slider navigation?

Question

I want to make a slider like horizontal navigation using css and html only

I'm using css :target in order to move to the desired target section.

So far so good... see example the below:

body {
  margin: 0;
  overflow: hidden;
}
.main {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
section {
  position: absolute;
  width: 100vw;
  height: 100Vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}
#section1 {
    background: bisque;
    transform: translateX(calc(0));
}
#section2 {
    background: #f8cc99;
    transform: translateX(calc(100vw * 1));
}
#section3 {
    background: #efcfa9;
    transform: translateX(calc(100vw * 2));
}
#section4 {
    background: #ffe7c9;
    transform: translateX(calc(100vw * 3));
}

<div class="main">
 <section id="section1">
   <div class="container">
     <h1>Section 1</h1>
   </div>
   <div class="arrow"><a href="#section2">==></a></div>
 </section>
 <section id="section2">
   <div class="container">
     <h1>Section 2</h1>
   </div>
   <div class="arrow"><a href="#section3">==></a></div>
 </section>
 <section id="section3">
   <div class="container">
     <h1>Section 3</h1>
   </div>
   <div class="arrow"><a href="#section4">==></a></div>
 </section>
 <section id="section4">
   <div class="container">
     <h1>Section 4</h1>
   </div>
   <div class="arrow"><a href="#section1">==></a></div>
 </section>
</div>

Then I would like to add an effect for the transition and I'm trying with transform translate and transition translate but unfortunately I can't manage to make it work properly

See what I mean below:

body {
  margin: 0;
  overflow: hidden;
}
.main {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
section {
  position: absolute;
  width: 100vw;
  height: 100Vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}
#section1 {
    background: bisque;
    transform: translateX(calc(0));
}
#section2 {
    background: #f8cc99;
    transform: translateX(calc(100vw * 1));
}
#section3 {
    background: #efcfa9;
    transform: translateX(calc(100vw * 2));
}
#section4 {
    background: #ffe7c9;
    transform: translateX(calc(100vw * 3));
}
#section2:target {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);

}
#section3:target {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);

}
#section4:target {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);

}

<div class="main">
 <section id="section1">
   <div class="container">
     <h1>Section 1</h1>
   </div>
   <div class="arrow"><a href="#section2">==></a></div>
 </section>
 <section id="section2">
   <div class="container">
     <h1>Section 2</h1>
   </div>
   <div class="arrow"><a href="#section3">==></a></div>
 </section>
 <section id="section3">
   <div class="container">
     <h1>Section 3</h1>
   </div>
   <div class="arrow"><a href="#section4">==></a></div>
 </section>
 <section id="section4">
   <div class="container">
     <h1>Section 4</h1>
   </div>
   <div class="arrow"><a href="#section1">==></a></div>
 </section>
</div>

I can do it with position fixed but I want to keep the horizontal scroll

Any help would be appreciated thanks

Answer 1

You can fix this problem by adding scroll-behavior: smooth to your section container. you don't have to add any transitions for it.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
body{
  overflow:hidden;
  margin:0px;
  font-family:'Roboto', sans-serif;
}
.main {
  height: 100vh;
  display: flex;
  overflow-y:hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
}

section {
  width: 100vw;
  height: 100%;
  transition: all .3s;
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

section a {
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 25px;
  border-radius: 50px;
  margin-top: 15px;
}

section a:hover {
  color: #ffffff
}

h1 {
  color: #ffffff;
}

#section1 {
  background: #6200EE;
}

#section2 {
  background: #03DAC6;
}

#section3 {
  background: #1a1a1a;
}

#section4 {
  background: #ff4500;
}

<!DOCTYPE html>
<html>
   <head>
      <title>Sample</title>
   </head>
   <body>
      <div class="main">
         <section id="section1">
            <h1>Section 1</h1>
            <a href="#section2">Go to Section 2</a>
         </section>
         <section id="section2">
            <h1>Section 2</h1>
            <a href="#section3">Go to Section 3</a>
         </section>
         <section id="section3">
            <h1>Section 3</h1>
            <a href="#section4">Go to Section 4</a>
         </section>
         <section id="section4">
            <h1>Section 4</h1>
            <a href="#section1">Go to Section 1</a>
         </section>
      </div>
   </body>
</html>

Note: The scroll-behaviour propery supports from the following browser versions:

For more information please visit : CSS scroll-behavior Property