Firefox seemingly resistant to transitioning between elements

Why is Firefox refusing to transition the element? Any suggestions for a fix?

.config:before
{
    content: 'test';
    font: 25px/55px serif;
    -webkit-transition: .6s -webkit-transform ease-in-out;
            transition: .6s transform ease-in-out;
}

.config.active:before
{
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

<span class="config active"></span>

JSBin: http://jsbin.com/zipokubode/1/edit?html,css,output

Note: I have the latest stable version of Firefox installed, so prefixing should not be an issue.

cssfirefoxtransition

Answer №1

Make sure to update the layout contest of the pseudo element: http://jsbin.com/xutesahiqe/1/edit?html,css,output

In this case, changing to display:inline-block; should work fine.

.config
{
    cursor: pointer;
      display:inline-block;
}

.config:before
{
    font: 25px/55px serif;
    display:inline-block;
    content: 'test';
    -webkit-transition: .6s -webkit-transform ease-in-out;
            transition: .6s transform ease-in-out;
}

.config.active:before
{
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

<span class="config"></span>

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 component's div does not respond to the max-width attribute

I'm currently facing an issue with my chart component in a view. I've been trying to reduce its size using max-width property but it doesn't seem to be working. Below are the relevant code snippets: <div id="chart"> < ...

htmlcssvue.js

How to retrieve the index upon clicking in Javascript

In my 3d art gallery project, I am utilizing plain JavaScript. The task at hand involves populating certain columns with images by pulling from an array of image sources. On click, I need to retrieve the index of the clicked image so that I can extract add ...

javascriptcss

Enlargement animation when hovering over a "next-link" button featuring an SVG file of a social media platform

The following code snippet demonstrates how to import an Instagram icon and create a footer component: import InstagramIcon from './assets/IG.svg'; export const Footer = ({ footer }: FooterInterface) => { return ( ..... <Link href={`${fo ...

javascriptcssreactjsnext.jstailwind-css

The Hover Effect fails to function properly on Internet Explorer 6

I have successfully implemented a CSS hover effect that works perfectly in all browsers except for IE6. The issue arises when I add a link to the page - the hover effect functions as expected. However, if I remove the link, the hover effect stops working. ...

cssinternet-explorer-6

Configuring Firefox profiles with Selenium

Could you assist me in configuring my Firefox profile with Firebug? I am looking to have the Firebug add-on automatically loaded with Firefox when initiated through Selenium WebDriver. Below is a snippet of my code: final File file = new File("C:\&bs ...

seleniumfirefoxfirebug

Check if already logged in using Python's Selenium module

Currently, I am working on automating certain tasks and occasionally the program requires logging in. I am looking for a way to verify if the system is already logged in and to automatically log in if it is not. The website I am dealing with is the admin ...

pythonseleniumfirefoxautomation

"Challenges arise with content layout when the screen size shrinks in

Having trouble with the layout on smaller screens - I want the image above the button but below the text. I'm new to bootstrap and haven't been able to figure it out by reading the docs. Can someone please help me identify the issue and explain w ...

htmlcssbootstrap-5

Background and border presentation issues arising from CSS conflict

While working on a webpage, I encountered a design conflict within a div that contains a group of other div elements. The current appearance can be seen at , and the desired look is shown in the image here: enter image description here ...

htmlcss

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

htmlcss

The col-md-6 grid does not adapt well for mobile responsiveness

I'm facing an issue with the layout of a section on my desktop site - when viewed on mobile, the image overlaps everything else. I need the image to be above and the orange box below on mobile. Desktop https://i.sstatic.net/Tu05k.jpg MOBILE https:/ ...

htmlcsstwitter-bootstrapsassbootstrap-4

Click to Rotate the Shape

I am attempting to apply a rotation effect on a shape when clicked using jQuery and CSS. My goal is to select the element with the id of x and toggle the class rotate on and off. The rotate class utilizes the CSS transform property to achieve the desired r ...

javascriptjqueryhtmlcss

Creating a div that takes up 100% of its parent's height, regardless of the children's dimensions, in a sophisticated layout

My webpage layout is structured as follows: https://i.sstatic.net/5rdiw.png The left side, identified as D, functions perfectly. It contains a significant amount of content that scrolls correctly. Even as the content increases, the height stays at 100% o ...

htmlcsstwitter-bootstrapbootstrap-4display

What steps can I take to ensure that the content within my bootstrap container always fits neatly within the container boundaries?

I'm attempting to structure one container with 3 rows. The first row contains the header, the last row the footer. In the middle row, I want two columns. The left column should display multiple scrollable cards. I've tried various methods to make ...

htmlcssbootstrap-4twitter-bootstrap-3

Determine if the data in an HTML table should be spanned when it

I'm facing a scenario where my HTML table contains duplicate data in a particular column, as illustrated below I am looking to automatically merge the cells of rows in the HTML table if the data in them is identical, similar to the table displayed be ...

javascripthtmlcssdjango-templates

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

javascripthtmlcsscss-animations

The AngularGrid library has been reported to generate blank areas in certain unique scenarios

I have implemented Angular grid to create a fluid layout of items on my page, similar to Pinterest. While it generally works well, I am encountering an issue where there is empty space in some cases because the position of item7 seems to be calculated inco ...

javascripthtmlcssangularjsangular-grid

Tips for preventing elements from wrapping in a lengthy list and using scrollbars in Firefox

When dealing with a lengthy flex list, the items (buttons) should wrap when there is not enough space available (using flex-wrap). However, an issue arises in Firefox where the items are wrapped once a scrollbar appears, even if there is ample space. In c ...

htmlcssfirefox

Tips on extracting code differences from code inspector

Utilizing the Chrome code inspector is extremely valuable, but I often find it challenging to track the modifications made to CSS and HTML live. This becomes particularly cumbersome when there are multiple tags being modified. Are there any Chromium exten ...

javascripthtmlcsschromiumweb-inspector

How to Perfectly Align a Div (Form) in Bootstrap 4

As I delve into the realm of Bootstrap, I am faced with a challenge in centering a form on my webpage. I have utilized CSS styling to ensure that both the html and body tags span 100% of the page's height. Additionally, I have created two divs: one ou ...

cssbootstrap-4pug