Hover over me to see the CSS animation translate upwards until it reaches a specific point

I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within the div? Is there a CSS solution for this or do I need to use Javascript or jQuery in this case?

html, body, #wrapper{
    min-width: 1000px;
    min-height: 100%;
    margin: 0;
    padding: 0;
    }

#wrapper{
    position: relative;
    }

body{
    padding: 50px;
    background-color: #f9f1dc;
    }

.one{
    background-color: #ffeffd;
    padding: 15px;
    border-radius: 50px;
    width: auto;
    }

.ball{
    display: inline-block;
    height: 100%;
    width: 100%;
    border-color: none;
    border-radius: 100%;
    background-color: #662a48;
    transition: transform 500ms ease-in-out; 
    }

.stay{
    height: 150px;
    width: 150px;
    border-radius: 150px;
    }

.stay:hover .ball{
    transform: translateX(770%);
    }
<!DOCTYPE html>
    <html>
    
        <head>
            <link href="css/ball-animation.css" rel="stylesheet" type="text/css">
        </head>
        
        <body>
            <div class="one">
                <div id="wrapper">
                    <div class="stay">
                        <div class="ball"></div>
                    </div>
                </div>
            </div>
        </body>
    
    </html>

htmlcssanimationhovertranslate

Answer №1

Make sure to use vw units instead of "%" for animations. To fix the issue, adjust the width of the containers and the animation accordingly. You may need to experiment with different settings.

html, body, #wrapper{
    width:80vw;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper{
    position: relative;
}

body{
    padding: 50px;
    background-color: #f9f1dc;
}

.one{
    background-color: #ffeffd;
    padding: 15px;
    border-radius: 50px;
    width: auto;
}

.ball{
    display: inline-block;
    height: 100%;
    width: 100%;
    border-color: none;
    border-radius: 100%;
    background-color: #662a48;
    transition: transform 500ms ease-in-out; 
}

.stay{
    height: 150px;
    width: 150px;
    border-radius: 150px;
}

.stay:hover .ball{
    transform: translateX(50vw);
}
<!DOCTYPE html>
<html>

    <head>
        <link href="css/ball-animation.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div class="one">
            <div id="wrapper">
                <div class="stay">
                    <div class="ball"></div>
                </div>
            </div>
        </div>
    </body>

</html>

Answer №2

Upon grasping the provided solutions, the ultimate outcome is as follows. 

html, body, #wrapper{
  min-width: 1000px;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper{
  position: relative;
  height: 150px;
}

body{
  padding: 50px;
  background-color: #f9f1dc;
}

.one{
  background-color: #ffeffd;
  padding: 15px;
  border-radius: 50px;
  width: auto;
}

.ball {
  display: inline-block;
  height: 100%;
  width: 150px;
  border-color: none;
  border-radius: 100%;
  background-color: #662a48;
     position:absolute;
  left:0;
  transition: all 880ms ease-in-out; 
}

.stay {
  height:100%;
  width: 150px;
  border-radius: 150px;
 
}

.stay:hover .ball {
      left:100%;
      transform:translateX(-100%);
}
<!DOCTYPE html>
<html>

  <head>
    <link href="css/ball_anim.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="one">
      <div id="wrapper">
        <div class="stay">
          <div class="ball"></div>
        </div>
      </div>
    </div>
  </body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Consider this layout configuration: <div id="PARENT_DIV"> <div id="LEFT_CHILD_DIV"> </div> <div id="RIGHT_CHILD_DIV"> </div> </div> Key features for PARENT_DIV: PARENT_DIV must have a higher z-ind ...

csshtml

Extracting information from JSON and presenting it in a structured table format

I've hit a wall with this JavaScript issue on my website. I'm trying to convert API JSON data into a table, and it's working fine when the data is on separate lines. However, when I introduce nested arrays in the JSON data, everything ends u ...

javascripthtmlarraysjsonknockout.js

Animated scrolling in Angular

I am working on a webpage using Angular, where each module is a component with an animation. However, I am facing an issue where the animation only runs when the page loads, but I want it to happen while the component is visible on the screen. One approa ...

cssangularanimationcss-animations

How can the seating arrangement be optimized for a seating chart and what is the most effective way to transition away from a traditional table structure?

Currently, I am attempting to create a dynamic seating chart on a webpage within an asp.net-mvc site using data retrieved from a database. Initially, I used a table to organize the grid layout of rows and columns, which resembled this structure: The datab ...

jqueryhtmlcssasp.net-mvchtml-table

How can I retrieve the URL for a specific location on Google Maps using latitude and longitude coordinates?

Is it possible to generate a URL using latitude and longitude coordinates that will take me directly to a Google Maps page showing that location? For instance, consider the following sample code: var lat = 43.23; var lng = 114.08; var url = 'http:/ ...

htmlgoogle-maps

Menu navigation - ensuring the background color extends to cover the entire page, not just the viewport

I'm facing an issue with the left navigation bar's design. Specifically, I'd like the grey color of the bar to extend vertically across the entire page. Currently, the gray bar ends at the viewport's edge. Is there a way to make the ba ...

htmlcssnavigation

Adjust google maps to fill the entire vertical space available

I found this helpful resource for integrating Google Maps into my Ionic app. Everything is working smoothly, but I am trying to make the map fill the remaining height below the header. Currently, I can only set a fixed height in pixels like this: .angula ...

javascriptcssangularjsionic-framework

XHTML markup error found: missing end tag for "div" element in W3C validation

Just finished validating my web page using the W3C markup validation service. You can find the results here. Here's what was returned: Error Line 112, Column 7: end tag for "div" omitted, but OMITTAG NO was specified </body> Info Line 16, C ...

htmlvalidationxhtmlw3c

Storing the background color in a JavaScript variable

I've been experimenting with creating a fade in and out effect for a background image on a website. I've also been attempting to capture the background color of a div and store it in a variable. Here's what I have tried: elem = document.ge ...

javascripthtmlcss

What is the best way to halt a jQuery function when hovering over it?

Currently, I have a jQuery function set up to run on setInterval(). However, I am looking for a way to pause the interval when hovering over the displayed div and then resume once no longer hovering (i.e., continue cycling through the divs). Does anyone ...

javascriptjqueryhoverintervals

The boundary for the multipart/form-data in the $http post request is missing

I noticed that the boundary I set for the post call appears different in Chrome. How can I make my custom boundary "--test" display correctly on the request payload? var url = '/site/apkUpload'; var deferred = $q.defer(); console.log ...

angularjsnode.jshtmlhttp

Disappearance of the second level in a CSS dropdown menu

I am currently working on creating a dropdown menu using only CSS. Check out this example I'm using: http://jsfiddle.net/DEK8q/8/ My next step is to center the menu, so I added position-relative like this: #nav-container { position: rela ...

htmlcssdrop-down-menu

Unable to adjust the position of the logo image

I cannot figure out how to center the logo over a video background. Any suggestions on what I might be doing wrong? I've tried changing the "position" to relative and absolute, but without any success. #hero video { width:100%; height:100%; p ...

htmlcssbackground

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

stopPropagation() halts the propagation in the opposite direction

I encountered an issue while attempting to create a non-clickable div. While it does stop propagation, it doesn't prevent what should be stopped and allows things that shouldn't be clickable. js //screen has set stopPropagation $("#smokeScree ...

javascriptjqueryhtml

Display 3 images with the carousel feature on the middle image

Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried: <div id="jcl-demo"> <div class="custom-container auto moreItems "> <a href="#" c ...

jqueryhtmlcss

What is the best way to create a JavaScript animation for altering the width of a div element?

Need help with creating a dynamic poll chart based on YES and NO votes? Check out this project where you can visually see the results by clicking HERE. Looking to add some animation effects to your poll? You can achieve a smooth transition using CSS with ...

javascripthtmlcssanimation

Effort to update Div element with Ajax fails to function

Looking for some assistance here. I'm attempting to update a database's entries using Ajax after submitting a form. The entries are displayed within a div. I've tried the following code to refresh only that specific div, but it doesn't ...

javascriptphpjqueryhtmlajax

Clearing data validation in HTML after an error has been resolved.Is there a way to clear

I need some help with a cloud page I am creating. I have implemented an alphabetic data validation in HTML to only allow users to input letters, which is working as expected. However, the issue I am currently facing is that the data validation error messa ...

htmlvalidationsalesforce-marketing-cloud

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

javascripthtmlangularjs