Having issues with implementing CSS3 animations on my webpage

I'm having trouble implementing a bouncing mouse animation on my website. The code works perfectly on another site, but on mine, it's not functioning at all.

Here is the CSS code:

.mouse {  
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    font-size: 32px; 
    color: #fff;
    z-index:9999;
    position: absolute;
    color: #e8e8e8;;
    bottom: 240px;
}   
.mouse i {
    -webkit-animation: todown 1.2s infinite linear;
    transition: all 0.3s ease-in-out;
}

The HTML code:

<a href="#x11" class="mouse">
    <i class="fa fa-angle-double-down icon-option"></i>
</a>

You can view the scroll-down icon I'm attempting to replicate on this website:

csscss-animations

Answer №1

To incorporate CSS animations, it is essential to define @keyframes.

Fortunately, the CSS in the theme you provided is not minified, allowing you to simply copy and paste the necessary sections for replication.

While the -moz vendor prefix is no longer necessary in Firefox 15, Chrome and other Webkit Browsers still require the -webkit-animation property. More information on browser support can be found at http://caniuse.com/#feat=css-animation

CSS:

#to-slider-scrollto i {
    -webkit-animation: todown 1.2s infinite linear;
    animation: todown 1.2s infinite linear;
}

#to-slider-scrollto i:hover {
    -webkit-animation: none;
    animation: none;
}

@-webkit-keyframes todown {
    0% {
        -webkit-transform: translateY(-15px);
        opacity: 0;
    }
    10% {
        -webkit-transform: translateY(-15px);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
    90% {
        -webkit-transform: translateY(15px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(15px);
        opacity: 0;
    }
}
@keyframes todown {
    0% {
        transform: translateY(-15px);
        opacity: 0;
    }
    10% {
        transform: translateY(-15px);
        opacity: 0;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    90% {
        transform: translateY(15px);
        opacity: 0;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

View a working codepen demo with only the necessary CSS

Answer №2

Explore cross-browser compatibility issues

.cursor i {
     -webkit-animation: moveDown 1.2s linear infinite;
      animation: moveDown 1.2s linear infinite;
}

@-webkit-keyframes moveDown {
    0% {
       -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
  50% {
      -webkit-transform: translateY(5px);
        transform: translateY(5px);
 }
}

@keyframes moveDown {
  0% {
       -webkit-transform: translateY(0px);
        transform: translateY(0px);
 }
 50% {
       -webkit-transform: translateY(5px);
        transform: translateY(5px);
  }
}

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

How can CSS animations be implemented on a diagonal path?

I have developed a unique CSS animation that adds a shiny effect to text. Currently, the effect only works horizontally. I am interested in exploring options to change the direction of the animation to create a diagonal shine effect. Below is the code I a ...

csscss-animations

Content does not display within a list element (ul)

I am attempting to display captions beneath the thumbnail slider in list format. However, the text is not appearing unless I switch the <ul> tag to <div>. You can locate the thumbnail here. It is the first thumbnail. Much appreciated. ...

htmlcss

Role in HTML/CSS

I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...

htmlcssbrowserpositioning

Using jQuery functions to disable adding or removing classes with a click event

Has anyone had success implementing a functionality where a div expands upon clicking, and reverts back to its original state when clicking on a cancel link within the same div? <div class="new-discussion small"> <a class="cancel">Cancel&l ...

javascriptjqueryhtmlcss

Styles for reading on Safari using an iPhone's reader mode

Currently in the process of optimizing my website for iPhones and exploring the Safari reader function. I believe it's a useful feature for websites with lengthy text, similar to mine, but I want to customize it slightly. Is there a way to adjust th ...

htmlcssmobile-safari

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...

jquerycss

Could you advise on the best placement for my upcoming JQuery animation?

Here is the code I am currently working with: $(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); $("#box2").a ...

javascripthtmljquerycss

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

I'm attempting to show a Bootstrap 4 modal without a backdrop. I've tried the following code with no success: .modal.right. modal-backdrop.show { background-color: transparent !important; } When I try this modification, it works (but affect ...

htmlcssbootstrap-4

Determine whether there is greater available space above or below a specific element within the DOM

I'm looking to create a dynamic layout where an input field is accompanied by a list in a div, positioned either above or below depending on available space. This setup needs to account for the fact that the input field could be located anywhere on th ...

htmlcssangularjstypescript

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

javascriptjqueryhtmlcss

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

Issue with customizing CSS in Fullcalendar Version 5 for Angular not functioning as expected

Currently, I am integrating Fullcalendar v5 into our Angular project and am looking to customize the Fullcalendar toolbar title color and size. In the styles.scss file, I inserted the following CSS code: .fc .fc-toolbar-title { font-size: 1.2em; color ...

htmlcssangularfullcalendarfullcalendar-5

Tips for aligning a div containing an image in the center of another div

Trying to perfectly center an image inside a div both vertically and horizontally using the display inline-block property. HTML <div class="center-wrapper"> <div class="image-holder"> <img src="picture.jpeg" alt="Centered Image"> ...

htmlcss

`Certain browsers are experiencing issues with text overlay functionality.`

I have managed to successfully create the necessary code to incorporate an image with a child element containing text overlaying the image. However, this functionality does not appear to be working on Internet Explorer (IE), and I am struggling to find a C ...

htmlcssinternet-explorerbootstrap-4

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

javascriptandroidioscsscordova

Creating Seamless, Unified Shape-to-Shape (Containers) Transition with CSS and JavaScript - A Step-by-Step Guide

I am experimenting with creating a unique effect where two rectangular shapes, each containing text and with rounded ends, move towards each other, merge to form a single rounded rectangle as the page is scrolled down, and then separate back when scrolling ...

javascripthtmlcssanimationcss-animations

Unable to see Primereact styles reflected on components

After some investigation, I've pinpointed the issue to be related to preflight from tailwind. Upon reviewing the documentation, I came across this helpful information: CSS Layer It seems that using Tailwind CSS with styled or unstyled modes of PrimeR ...

cssreactjsnext.jstailwind-cssprimereact

Adjusting the appearance of Material-ui table within the row.getRowProps() function

I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows. According to the documentation (https://material-ui.com/api/table-row/), it s ...

cssreactjsmaterial-uireact-tablereact-table-v7

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

javascriptjquerycssdrop-down-menu

Deleting entries from a selection of items in a list generated from an auto-fill textbox

I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...

javascriptjqueryhtmlcssjquery-ui