What is preventing these arrows from spinning?

I am struggling to find a solution to rotate the arrows on the x-axis, which are added by the::before pseudo-element when the link is active. Despite trying keyframes and searching online, I have not been able to achieve the desired result. Below you will find the HTML and CSS code that I have attempted.

.nav {
  list-style: none;
}

.side:link,
.side:visited {
  color: #0018d1;
  font-size: 24px;
  text-decoration: none;
}

.side::before {
  content: "\21d2";
  animation: rotate 0.1s infinite;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}
<div class="sidenav">
  <div class="profile-pic"></div>
  <nav class="sidenav-container">
    <ul class="nav sidenav-list">
      <li><a class="side nav-link" href="#About">About</a></li>
      <li><a class="side nav-link" href="#Skills">Resume</a></li>
      <li><a class="side nav-link" href="#projects">projects</a></li>
      <li><a class="side nav-link" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>
htmlcsscss-animationspseudo-element

Answer №1

Make sure to include display: inline-block in your ::before

.nav {
  list-style: none;
}

.side:link,
.side:visited {
  color: #0018d1;
  font-size: 24px;
  text-decoration: none;
}

.side::before {
  content: "\21d2";
  animation: rotate 0.1s infinite;
  display: inline-block;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}
<div class="sidenav">
  <div class="profile-pic"></div>
  <nav class="sidenav-container">
    <ul class="nav sidenav-list">
      <li><a class="side nav-link" href="#About">About</a></li>
      <li><a class="side nav-link" href="#Skills">Resume</a></li>
      <li><a class="side nav-link" href="#projects">projects</a></li>
      <li><a class="side nav-link" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

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

What is the reason for my website page topic being positioned behind the navbar in Bootstrap?

When I click on the navbar, I expect to see the topic displayed beside it, but instead, it is appearing below the navbar. I've tried adding margins, but that hasn't resolved the issue. Can someone help me with finding a solution? This is how my ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

What could be causing my transform scale to not function properly in Bootstrap?

As a complete beginner, I am currently in the process of learning bootstrap. I have noticed that the animation breaks when I apply it, specifically the scaling part. Interestingly, the animation works perfectly fine without Bootstrap. I am wondering if the ...

htmlcssbootstrap-5

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

javascriptphpjqueryhtml

Creating a Map Using HTML and JavaScript

My current project involves creating a simple map that can be moved with mouse drag functionality, featuring images such as islands. I have successfully retrieved the mouse position by declaring variables posX and e.clientX, as well as for e.clientY. Howe ...

javascripthtmlcss

Angular animation not firing on exit

I am encountering an issue with my tooltip component's animations. The ":enter" animation is working as expected, but the ":leave" animation never seems to trigger. For reference, here is a link to stackblitz: https://stackblitz.com/edit/building-too ...

javascriptcssangular

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

javascripthtmlangularjsimage

Show data from html input using PHP

Here is the HTML and PHP code I have been working on. I am trying to display the inputted data, but I am not getting any output. Can you help me identify what is wrong with my code? HTML <form action="welcome.php" method="POST"> <fieldse ...

phphtml

Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so: var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)" ...

javascriptjquerycsshtml

Update the content of a div and refresh it when a key on the keyboard is pressed

I need to hide the images in a div when I press a key on the keyboard. How can I achieve this? <div> <span role="checkbox" aria-checked="true" tabindex="0"> <img src="checked.gif" role="presentation" alt="" /> ...

javascriptjqueryhtmlcss

Switching Styles in React applications

I am currently developing a React application and I have multiple stylesheets to restyle the same elements. For the purpose of this query, let's assume that I have two stylesheets with identical elements but different styles. Presently, in my app, I i ...

cssreactjs

The functionality of $(selector).css() seems to be malfunctioning

I currently have an html div element stored in a variable var rows = ""; rows += "<div>1111 : Hi there</div>"; Despite multiple attempts, I have failed to add a background color to this div using the following methods: 1. $(rows).css({&apos ...

javascriptphpjqueryhtmlajax

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

cssreactjshtml-tablematerial-ui

CSV output is all jumbled after web scraping

This script is designed to iterate through multiple results pages and then traverse the results table on each page to extract all the data from it, along with additional information stored outside the table. However, the resulting CSV file is not organize ...

pythonhtmlpython-3.xcsvweb-scraping

Responsive card design created by Bootstrap element

Hello lovely people, I'm currently facing an issue with two triangles that are supposed to be next to each other with a small gap in between. However, when I resize the screen, they start moving freely and don't stay within the designated card ar ...

csstwitter-bootstrapbootstrap-4

In what situations are forms preferable to standard div elements?

When might it be more appropriate to use <forms> instead of <div>? I personally have never used it, but I know others do. Could there be something valuable that the form element provides, beyond just the semantic aspect? ...

html

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

javascripthtmljquerycss

Issue with Anchor class in CakePHP where the variable $action is not defined

I'm struggling to apply a class to my anchor link when it is active. How should I define the $action variable in this case? Version: 4.2.9 Error: Undefined variable: action [ROOT\templates\layout\default.php, line 108] templates/lay ...

phphtmlmodel-view-controllercakephp

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

javascriptjqueryhtmljsonajax

Issue with Bootstrap 5 collapse not toggling back on second button press

I am encountering an issue with a button that is supposed to show a div on click using Bootstrap 5's "Collapse" class. The problem is that the content shows up correctly on the first click, but it doesn't hide again when the user clicks the butto ...

htmlasp.net-mvcasp.net-corebootstrap-5

Is there a way to locate the source or URL linked to a button on a form or webpage?

Currently, I am extracting data feeds from a webpage by clicking a button that is similar to the 'Login' button displayed on the following link: However, this button acts as a 'Download' request that initiates the download of a csv rep ...

javascripthtmlcss