"Major issues arise as CSS3 Animation fails to function properly across all web

I have been experimenting with using a sprite and CSS3 animation to create a rollover effect. While it seems to be working in CODA 2, I'm encountering issues when testing in Mozilla, Chrome, Safari, and Opera as the animation fails to trigger.

/*linkedin contact button*/
button{text-indent:-99999px; border: none; }
a.linkedin,a.linkedin:hover{display: block; cursor: pointer; background: url(../img/linked.png) no-repeat; width: 128px; height: 128px}
a.linkedin{background-position: -0 -0}
a.linkedin:hover{animation:first 1000s; -moz-animation:first 1000s; -webkit-animation:first 1000s; -o-animation:first 1000s;}

@keyframes first{from {background-position: -140px -0;} to {background-position: -0px -0;}}
@-moz-keyframes first{from {background-position: -140px -0;} to {background-position: -0 -0;}}
@-webkit-keyframes first{from {background-position: -140px -0;} to {background-position: -0 -0;}}
@-o-keyframes first{from {background-position: -140px -0;} to {background-position: -0 -0;}}
*a.linkedin:hover{background-position: -140px -0/9}/*for ie*/
cssspritecss-animations

Answer №1

Have you considered utilizing CSS3 transitions instead? If the only change you're making is to the background position, creating keyframes might be unnecessary. Take a look at this working example on jsfiddle:

http://jsfiddle.net/RfbhD/3/

You can achieve the desired effect with just a few lines of CSS:

a.linkedin {
    background: url(http://placekitten.com/300/128) 0 0 no-repeat; 
    cursor: pointer;
    display: block;
    width: 128px; 
    height: 128px; 

    -webkit-transition: background-position 1s ease; 
       -moz-transition: background-position 1s ease; 
         -o-transition: background-position 1s ease; 
            transition: background-position 1s ease; 
}

a.linkedin:hover{
    background-position: -140px 0; 
}

​

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

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

Is there a way to dynamically change the direction of the owl-carousel-o angular slider based on the selected language? Currently, I have set rtl: true in the owl-carousel configuration during initialization. However, when the user switches to a different ...

javascriptcssangularowl-carousel

The negative z-index is causing issues with my ability to select classes using jQuery

By setting a z-index of -3 for several divs in my background, I thought they wouldn't affect the formatting of elements in the foreground. But now I'm facing an issue where I can't click on those background divs when trying to target them wi ...

javascriptjqueryhtmlcss

Combining Versioning with BundleConfig.cs: A Comprehensive Guide

Encountering a recurring issue where changes made to CSS or Javascript files do not reflect in client browsers unless they manually refresh the page with ctrl+F5. This poses a challenge, especially in a school system with numerous users who may not be awar ...

javascriptcssversioningbundling-and-minification

How to move content without affecting the background of the `<body>` using scrolling

Can I achieve a glass morphism effect on my page without moving the background of the body? I only want to move the .container. Is this feasible? I attempted using background-attachment: fixed, but it did not work for me. Here is the code snippet I have be ...

htmlcss

Fuzzy division following a CSS transformation/animation

I have been working on a content slider, using the guidelines from this demonstration However, I have encountered an issue where my content, which consists of a few divs, appears slightly blurry after the CSS transition completes. This problem only seems ...

csscss-transitionscss-transforms

``There seems to be a problem with the radio buttons where the selection disappears when

I'm facing an issue with a radio button group I created. It's functioning properly, but the selection disappears when clicked outside of the radio button. Can someone assist me in resolving this problem? Here is the link to the jsfiddle for refer ...

htmlcssradio-button

CSS Animations are effective in CodePen, but unfortunately, they do not function properly once integrated into an ASP.Net project

I created a unique design on codepen with a background animation, which functions properly there. However, when I integrate it into my ASP.Net Core project, the animation doesn't work as expected. The file references seem correct because the backgroun ...

htmlcsscss-animationsasp.net-core-2.0

Delay the .show class in Bootstrap 4 navbar collapse after disabling the .collapsing class

In Bootstrap 4 collapse functionality, I am looking to remove the delay in displaying the .show class after the .collapsing class. What I want is for the .show class to appear on the .collapse element immediately after a click event triggers the toggle. ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Adhering to a modular approach to design

I am facing an issue with two modules: One is the .master-header and the other is the .header-nav The .header-nav is contained within the .master-header and consists of a simple navigation menu: <nav class="header-nav"> <ul> ...

cssmodulebem

Customizing the appearance of the browser's autocomplete feature as we input information into the form field

https://i.sstatic.net/p7PvH.png The image illustrates the issue of the background turning white when the browser autofills. However, I am seeking a solution similar to the transparent input below. ...

cssinputbackground

The standard color code applied to an HTML button

I need to create an anchor element <a> that resembles an HTML button. However, I am struggling to find the default background color for the input type button. ...

htmlcss

Get rid of the .php extension in the URL completely

Lately, I've been experimenting a lot with the .php extension. I successfully used mod_rewrite (via .htaccess) to redirect from www.example.com/example.php to www.exmaple.com/example. Everything is running smoothly. However, I noticed that even though ...

javascriptphphtmlcss

Selenium was unable to find the p tag element on the webpage

I apologize for reaching out to you all for assistance with such a basic task, but I have tried everything in my toolkit and still can't seem to figure it out. I've experimented with partial xpath, full xpath, and various CSS selectors. I am see ...

jquerycssseleniumxpath

Having trouble loading Yeoman Webapp SASS

Every time I try to build a web application using 'yo webapp', I encounter a 404 Error. GET http://localhost:9000/styles/main.css 404 (Not Found) I removed compass from the project, but that shouldn't be causing the issue, correct? ...

csssasshttp-status-code-404

Step-by-step Guide on Making a Dropdown List with Options Featuring Background Images and Text

Hello, I am working on creating a customized dropdown list similar to the one shown in the image. https://i.sstatic.net/saeCd.png My goal is to have a select list with options that display both an image and the country name. However, my current code is n ...

phphtmlcss

Ensure that children elements are aligned to the bottom by setting the axis of the HTML

Elements positioned within a parent DIV typically flow from top to bottom. Even when using Javascript to add elements to the parent DIV, they maintain this top-to-bottom positioning. I am interested in achieving a bottom-to-top axis alignment within the pa ...

javascripthtmlcsspositioningaxis

JavaScript: Adjust DIV Width Based on Window Height

Is there a way to make the width of a div equal to the height of the window in jquery? I attempted this method: <script type="text/javascript"> $(".rt-container").style.width = $(window).height(); </script> Unfortunately, it did not work. I ...

javascriptjquerycss

Apply specific margins to every second element in media queries using the margins that were previously set for every third element

Looking to adjust the margin for every second element instead of every third when using media queries. .title:nth-child(3n+3) {margin-right:0 !important} @media screen and (max-width:1160px) and (min-width:900px){ .title:nth-child(2n+2) {margin-right:0 ! ...

cssmedia-queriesmargin

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

What is causing all webkit browsers to overlook the z-index in my code?

I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue. HTML: <html lang="en-us"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initi ...

htmlcss