Breaking News: Grepper is joining You.com. Read the official announcement!

css transition slide right to left on click

Ankur answered on March 31, 2023 Popularity 4/10 Helpfulness 3/10

answer css transition slide right to left on click

css transition slide right to left on click

Comment

<!DOCTYPE html>
<html>
<head>
  <title>Slide Right to Left Transition</title>
  <style>
    .slide {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(100%) translateY(-50%);
      width: 100px;
      height: 100px;
      background-color: #ccc;
      transition: transform 0.5s ease;
    }
    .slide.left {
      transform: translateX(0%) translateY(-50%);
    }
  </style>
</head>
<body>
  <div class="slide"></div>
  <script>
    const slide = document.querySelector('.slide');
    slide.addEventListener('click', () => {
      slide.classList.add('left');
    });
  </script>
</body>
</html>

I hope it will help you. Thank You :)
For more refer link : https://www.programmingquest.com/2023/04/css-transition-slide-right-to-left-on.html

Popularity 4/10 Helpfulness 3/10 Language css

Source: www.programmingquest.com

Tags: click css right-to-left slide transition

Link to this answer
Share Copy Link

Contributed on Mar 31 2023

Ankur

0 Answers Avg Quality 2/10

css transition slide right to left on click

Contents

More Related Answers

css transition slide right to left on click

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.