What is preventing my CSS Animation from activating on my website?

Is there something in the code preventing the animation from working properly?

.projectLinks a{
  background-color: var(--secondary-color);
  color: var(--main-color);
  padding: 2px 4px 4px 4px;
  border-radius: 15px;
  margin-right: 25px;
  text-decoration: none;

Animate it!

  transition-property: transform;
  transition-duration: .3s;
}

.projectLinks a:hover{
  background-color: var(--secondary-hover);
  transform: translateY(-3px);
}

The hover effect is working, but why isn't the transition happening smoothly?

Take a look at this codepen demo I created to illustrate the issue:

https://codepen.io/Ancross/pen/yLKabeM

cssanimationcss-animationscss-transitions

Answer №1

To customize the appearance of the links, you can modify the display property. By default, they are set to inline.

To maintain a similar visual style, I opted for using display:inline

.projectLinks a{
  background-color: rgb(0, 153, 255);
  color: white;
  padding: 2px 4px 4px 4px;
  border-radius: 15px;
  margin-right: 25px;
  text-decoration: none;
  transition-property: transform;
  transition-duration: .3s;
  display:inline-block;
}

.projectLinks a:hover{
  background-color: rgb(1, 137, 228);
  transform: translateY(-3px);
}
<div class='projectLinks'>
  <a>Text</a>
</div>

Answer №2

You have applied translateY to an inline-level element, which cannot be transformed due to certain constraints. To resolve this issue, you can change it to an inline-block

To implement this in CSS, use the following code:

.projectLinks a {
  ...
  display: inline-block;
}

This will allow the element to display inline while maintaining block properties. For more information on inline and block-level elements, please refer to the MDN documentation links below:

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

Showcase three elements next to each other on the same row (Photo Gallery, Description, and Contact Form)

I am attempting to showcase three divs in a single line while working on a Subtheme for the Drupal 8 Bootstrap Theme. These particular divs are fields nested within a view known as viewproducts. The divs include: Juicebox Photo Gallery; ...

csswebformsbootstrap-4drupal-8drupal-views

What are the steps to create a unique popup div effect with jQuery?

Upon clicking the icon on this page, a mysterious div appears with information. I'm completely baffled by how they achieved this cool effect using css/jQuery tools. Can anyone shed some light on the mechanism behind this? ...

javascriptjqueryhtmlcss

DIV collapsing in reverse order from the bottom to the top

Looking for some help on how to create two links that, when clicked, will scroll a hidden <div> up to fill the full height of its parent container. I've been having trouble with the element using the full height of the <BODY> instead. ...

jqueryhtmlcss

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

javascriptjqueryhtmlcss

What are the reasons for not utilizing JSS to load Roboto font in material-ui library?

Why does Material-UI rely on the "typeface-roboto" CSS module to load the Roboto font, even though they typically use JSS for styling components? Does this mix of JSS and CSS contradict their usual approach? ...

cssreactjsmaterial-uijss

Having issues with referencing external JavaScript and CSS files in Angular 6

Dealing with an angular6 project and a bootstrap admin dashboard template, I'm facing issues importing the external js references into my Angular application. Looking for guidance on how to properly import and refer to external Js/CSS files in an angu ...

javascriptcssangularangular6

The HTML iframe is displaying blank content

I'm trying to embed a webpage within another webpage using an iframe. I attempted to do so with this simple code: <iframe src="http://edition.cnn.com/" id="i_frame"></iframe> JSFIDDLE However, nothing is displaying. Any thoughts on why ...

javascripthtmlcssiframe

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time ...

javascriptcsshtml

I require a picture to fill up as much space as possible, regardless of its initial dimensions

As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numer ...

cssreact-nativeflexbox

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

htmlcssweb

Listening for JS events on a CSS class called "int-only" which only accepts

Having an issue: I'm encountering a problem with this PHP code: <?php for($i = 0; $i < sizeof($floating_ips_json["floating_ips"]); $i++){ ?> <tr class="details-control-<?php echo $i; ?> cursor-pointer"> <t ...

javascriptphpcss

Encountered a problem with Vuetify's sass variables

I am currently working on my Vuetify3 project where I need to customize a select dropdown from a library to match the style of Vuetify's select dropdown perfectly. After inspecting Vuetify's select box, I decided to replicate its styles by using ...

cssvue.jssassvuetify.jsvuetifyjs3

Graphic descending within container

Struggling to design some divs for image display, I encountered a problem where the image shifts down by 3 pixels. It seems this is due to a 3 pixel margin on the container div, but I'm puzzled as to why it affects the image position. padding:0; marg ...

csshtml

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

Using percentages to position Div elements

Currently, I am working on an HTML page that requires a div element spanning the full width of the page. My goal is to arrange other divs within this full-width div using percentages rather than pixels. The class associated with this div is .question. Thi ...

javascriptcss

Set the background color of a webpage depending on the data retrieved from the database when a specific radio button

I am facing a challenge with my radio buttons that are set to light up green when the page loads. However, I am working on an "order system" where I need a specific button or "locker" to appear red instead of green when the page loads. While I have succes ...

phphtmlcss

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...

cssreactjsmaterial-ui

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

javascriptjquerycsswordpresswidget

Is there a way to position the text within an email body at the center using SendGrid?

I've been working on creating an email newsletter template using SendGrid, and I've run into a formatting issue where the content doesn't align properly in the email body. The image below shows how it's appearing incorrectly. Does anyon ...

htmlcsssendgrid