Guide on creating a div that can perform both a scale animation and a translateY animation simultaneously when hovering over it

Check out this code: https://codepen.io/sabeser/pen/BaOeBPW

:root {
  --scale--ratio: 1;
}

#wrapper {
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 50vw;
}

.circle {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 20em;
  -webkit-animation: floataround 1.1s infinite alternate;
  animation: floataround 1.1s infinite alternate;
  transform: scale(var(--scale--ratio)) translate(0%, 0%);
  transform-origin: 0% 0%;
  transition: transform .9s;
  margin: 1em;
}

@keyframes floataround {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.circle:hover {
  cursor: pointer;
  background-color: green;
  --scale--ratio: 1.2;
}
<div id='wrapper'>
  <div class='circle'>

  </div>

  <div class='circle'>

  </div>
</div>

You'll notice two circles moving up and down in the demo:

https://i.sstatic.net/xeKIa.png

However, when trying to make each circle scale on hover, problems arise due to conflicting code:

-webkit-animation: floataround 1.1s infinite alternate;
animation: floataround 1.1s infinite alternate;

How can I achieve both animations without interference?

htmlcss

Answer №1

To maintain the proper functionality of your animations, it is essential to include the scale() function within your @keyframes. Failure to do so will result in a complete override of the transform property:

@keyframes floataround {
  0% {
    transform: scale(var(--scale--ratio)) translateY(0);
  }

  100% {
    transform: scale(var(--scale--ratio)) translateY(-8px);
  }
}

If you wish to create a smooth scaling effect during hover animations, you must utilize the separate transform properties scale and translate, as demonstrated below:

:root {
  --scale--ratio: 1;
}

#wrapper {
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 50vw;
}

.circle {
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 1em;
  border-radius: 20em;
  /* set default scale */
  scale: var(--scale--ratio);
  /* enable scale animation */
  transition: scale 1.1s;
  -webkit-animation: floataround 1.1s infinite alternate;
  animation: floataround 1.1s infinite alternate;
}

@keyframes floataround {
  0% {
    translate: 0;
  }
  100% {
    translate: 0 -8px;
  }
}

.circle:hover {
  /* update scale */
  --scale--ratio: 1.2;
  cursor: pointer;
  background-color: green;
}
<div id='wrapper'>
  <div class='circle'></div>
  <div class='circle'></div>
</div>

Please be aware that individual transform properties are relatively new and may not be fully supported on all devices. Nevertheless, data from caniuse.com indicates that they are compatible with almost 90% of user devices at present.

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

Boosting vertical reach within a distance

How to make the green div adjust its height based on the content like the red div? This means that when the text in the green box increases, the height of the red box should also increase to match it. I am aware that removing the span from .aaa might solve ...

htmlcssflexbox

The contact form is not functioning properly, as it is not sending emails and

Having some trouble with my contact form on the website. All the form fields are validating properly but for some reason, the email is not being sent and the page reloads. Can someone review my code and help me identify where the issue might be? I want the ...

javascriptphphtmlajax

Guidelines for choosing an Element Id within an attribute tag using jQuery

Check Output and -->question. . I am a beginner in utilizing Bootstrap and JQuery for programming. I am interested in learning how to identify the "id" of an input element that is nested within another element's attribute. In my code, I am using ...

javascriptjqueryhtmltwitter-bootstrapcss

Unable to conceal the scrollbar while keeping the div scrollable

I've been attempting to implement the techniques outlined in the guides on this site, but I'm encountering difficulty hiding the scroll bar while still maintaining scrolling functionality! My current approach involves setting the parent as relat ...

javascripthtmlcss

Is it possible to have multiple divs with unique IDs that can be individually controlled using a single JavaScript function?

I'm in the process of figuring out how to create a single JavaScript function that can manage multiple divs. I currently have several divs with distinct ids and I've written separate JavaScript functions for each one. However, they either do not ...

javascripthtmlcss

Incorporating web pages seamlessly within a different web page

Is there a way to embed one web page into another without using an iFrame, as it causes issues? I have tried using the object tag but encounter problems in Internet Explorer. The links within the embedded pages do not open correctly in IE. Are there any so ...

htmlajaxembed

Is there a way to display two words side by side in React components?

I previously had the following code: projectName: project.get('name') === 'default' ? 'No Project' : project.get('name') In the render() method, it was written like this: <div className='c-card__projects&ap ...

javascriptcssreactjsstyles

Position a button centrally beneath three div elements

I have 3 different colored squares and a button. How can I align the button directly beneath the squares? Currently, the button is displaying on the same line as my colored squares in #squares, and it's aligned to the left. Any help or suggestions wo ...

htmlcssflexbox

React CSS modules are a powerful tool for styling components in

Having some difficulty with css modules in react, I am unsure how to utilize react modules dynamically. import classnames from 'classnames' import styles from './hover.module.css /// /// const [flashElements,setFlashElements]=useState(elemen ...

javascriptcssreactjs

Spring load without CSS

Upon successful login, I am redirected to my main site using the following controller: //Login Success @GetMapping("/login-success") public ModelAndView loginSuccess() { return new ModelAndView("/cont/home.html"); } The URL for this redirection i ...

javahtmlcssspring

Extract latitude and longitude coordinates from a dataset by applying a rectangular filter

I have developed a program that extracts information from a JSON object and showcases it on a webpage, specifically focusing on Public Bike Stations. The JSON object includes the latitude and longitude of each station, making it easy to locate them. My cu ...

javascriptjqueryhtmljsoncoordinates

When I hover my mouse over the items on the Navigation bar, they shift forward

Seeking assistance with a coding issue. When hovering over TOYOTA, the HONDA and CONTACT US sections move forward unexpectedly. This movement is unwanted as I would like only the next list item to display when hovering over TOYOTA and HONDA. How can I corr ...

htmlcss

The collapsed menu in Bootstrap 3.3.5 is refusing to expand

After spending countless hours searching for a solution both here and elsewhere, I am still unable to get the bootstrap 3.3.5 menu on mobile screens to collapse and expand with a click. Is there an issue with my code that is causing this problem? <!--n ...

javascriptjqueryhtmlcsstwitter-bootstrap

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

javascripthtmlcssinternet-explorertabs

Firefox failing to interpret nested element background

I'm facing an unusual problem with Firefox while developing a menu that has a maximum of three levels. The issue seems to be isolated to Firefox as everything works perfectly in Chrome. When I click on 'First Level Menu', a ul opens with two ...

htmlcssfirefox

Ways to prevent a background image from repeating in an HTML email without relying on CSS

I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...

htmlcss

issues with image tags using Angular

Having trouble loading a jpg logo in an angular app using the <img> tag in the HTML of header component. Interestingly, when clicking on the path in VS CODE it leads to the image, but on the browser, I encounter a 404 error. This is the code snippet ...

htmlangulardirectory-structure

Guide to uploading a PDF to Google Drive and embedding it on an HTML static website

I manage a static HTML site for a small food shop. They require monthly menu uploads in PDF format. I believe uploading to Google Drive would be a more efficient solution than creating a separate admin view for file uploads. Can anyone advise me on how to ...

javascriptphphtmlpdf

Guide to Personalizing Range Slider

Click here to visit a website. How can I change the styling of the slider's selected range color and pointer color? <input ref={this.inputRef} id="sliderId" className="inputR w-100" name= ...

javascriptcssreactjs

Populating Dropdown list with values based on input provided in Textbox

Can you assist me in finding the solution to this issue? I have a TextBox and a DropDown list. For example, if I type "Anu" into the textbox, I want it to populate the dropdown list based on the text entered. How can I achieve this? I am working with vb. ...

javascripthtmlasp.netvb.net