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

The spacing within the table's <tr> elements does not get altered

I am struggling to add a small space in the table <tr> but my attempts have not been successful. How can I resolve this issue? Please refer to the image below for clarification: .panel-booking .panel-body { padding: 0px; height: 100px; } . ...

htmlcsshtml-table

Tips for resolving a sluggish webpage with database content

I am facing an issue with one specific page on my website that contains links to the database. The loading speed of this page is extremely slow and I'm looking for ways to speed it up. I have noticed that even when there are no visitors on the server ...

javascriptphphtmlcssmysql

How can I adjust or eliminate the offset in Bootstrap 3 for smaller devices like tablets and smartphones?

Within the structure of my web app view (created in Rails 5), this is the main div: <nav class="navbar navbar-inverse navbar-fixed-top" > my navigation bar </nav> <div class="col-md-6 col-md-offset-3"> the central content of my web ...

htmlcsstwitter-bootstrap-3responsive-design

Creating a display of divs that flow from left to right in each row, and then stacking the rows from bottom to top using CSS and jQuery

My current dilemma involves a collection of divs that must be displayed in a specific order, but with a rather intricate layout. Essentially, this is the structure of my HTML: <div> <div class="box">1 (first in list)</div> <di ...

javascriptjqueryhtmlcss

Move the footer to the bottom of the content

I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet: <div id="container"> <div id="header"> ...

htmlcssfooter

Troubleshooting: Ruby on Rails and Bootstrap dropdown issue

Having some issues with implementing the bootstrap dropdown functionality in my Ruby on Rails application's navigation bar. I have made sure to include all necessary JavaScript files. Below is the code snippet: <div class="dropdown-toggle" d ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Resetting CSS animations using animation-delay

My aim is to animate a series of images on my landing page using Next.js and SCSS. The issue arises when I try to add dynamic animations that reset after each cycle. The delay in the animation causes the reset to also be delayed, which disrupts the flow. I ...

cssanimationnext.jssasscss-animations

Identify and emphasize CSS codes within PHP files using Notepad++

I'm working with a PHP file in Notepad++ that correctly highlights PHP code. Within this file, I have JavaScript code which is properly recognized between the <script type="text/javascript"> and </script> tags. However, the CSS code withi ...

cssnotepad++

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

htmlcss

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...

htmlcsscss-selectorshtml-lists

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: Internet Explorer: The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on Internet Explorer, the content gets hidden and doesn't adjust ...

htmlcssinternet-explorer

Responsive Material-UI horizontal navigation bar

Hey there! I'm working on developing a UI using Material-UI, and I want to make it so that the menu can be collapsed into a slide-in style menu when accessed on a mobile device. Currently, I'm using tabs which allow for sliding left and right, b ...

cssmenumaterial-ui

Navigating pages in tinymce editor

Currently, I have implemented TinyMCE as the editor for my PHP-based website. However, I am facing a challenge in integrating pagination within the editor. My goal is to allow users to input long content that will be displayed across multiple pages inste ...

phpjqueryhtmlcsstinymce

Scrolling behavior in two columns with sticky positioning

Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller ...

javascripthtmlcssviewportsticky

Steps to creating a popup within an HTML page from another HTML page

I recently started learning JavaScript. I have a link on my homepage that directs to another HTML page, but I would like it to show as a popup on the homepage with responsiveness and some stylish design elements such as a folded corner. Is there a way to a ...

javascriptjqueryhtmlcss

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

cssangulartypescriptanimation

Utilizing Fancybox with a polymer paper-card: A step-by-step guide

I have a collection of paper-cards and I am looking for guidance on integrating the fancybox library to display the content of each paper-card. Here is a sample of a paper-card: <paper-card heading="Emmental" image="http://placehold.it/350x150/FF ...

htmlcsspolymerfancybox

What could be causing my Bootstrap 5 hover effect to malfunction?

Can anyone help with changing the hover effect of a bootstrap button in my code? Here's the HTML: <button type="button" class=" btn btn-dark">Sign Up</button> And here's the CSS I tried: .btn-dark:hover { color: ...

cssbuttoncss-selectorshoverbootstrap-5

Align two spans vertically in a div using Bootstrap

Struggling to create a left-hand side navigation card with Bootstrap and Bootstrap icons. The goal is to have the page name on the left and an icon on the right, but vertical alignment is posing a challenge. Take a look at the code snippet below: <b-li ...

htmlcsstwitter-bootstrapbootstrap-4

What is the approach for capturing system or website sound using JavaScript?

After creating an online drumkit and guitar player, I am now looking to enhance my website by adding a feature that allows users to record their sessions and download them. Since I am new to web development and familiar only with HTML, CSS, JavaScript, and ...

javascripthtmljquerycssaudio-recording