Troubleshooting issue: BS3 carousel not functioning smoothly in Firefox despite animate.min.css integration

I am currently using Firefox version 33.0 on Ubuntu operating system version 14.04. I have a website running locally (localhost) which includes a bootstrap 3 carousel. I have added the "animated pulse" class from animate.min.css to the images inside the "item" div, and "animated fadeinleft" class to the carousel caption.

<div class="item">
   <img src="images/2.jpg" class="img-responsive animated pulse">
       <div class="container">
           <div class="carousel-caption">
               <h1 class="animated fadeinleft">Another example headline.</h1>
               <p class="animated fadeinright">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
         </div>
      </div>
</div>

There are a total of 3 slides in the carousel. The initial appearance of each slide includes the specified animation effects, but subsequent appearances do not show any effects, particularly when viewed in Firefox browser. Interestingly, it works as expected in Chrome version 38.0.2125.104. Any suggestions on how to resolve this issue would be greatly appreciated.

htmlcsstwitter-bootstrapanimate.css

Answer №1

If you take a look at the illustration showcased on their website, you will notice that classes are initially applied. If there is a need to trigger the animation again, one must remove and reapply the classes. This method essentially restarts or triggers the CSS3 animation by the process of removing and adding classes once more. Additional insights on this topic can be found here. The issue in your particular case seems to revolve around the absence of removing and adding classes.

Regarding Bootstrap, the utilization of slide.bs.carousel enables users to reintroduce the classes. A data attribute [data-animation] has been incorporated into elements for the relevant animation.

<div class="active item">
    <img src="http://lorempixel.com/1024/750" alt="Slide1" class="img-responsive animated pulse" data-animation="pulse" />
    <div class="container">
       <div class="carousel-caption">
           <h1 class="animated fadeInLeft" data-animation="fadeInLeft">Yet another sample headline.</h1>

           <p class="animated fadeInRight" data-animation="fadeInRight">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       </div>
     </div>
</div>

Javascript code snippet:

function animateElement(obj, anim_) {
    obj.addClass(anim_ + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass();
    });
}

$('#myCarousel').on('slide.bs.carousel', function (e) {

    var current = $('.item').eq(parseInt($(e.relatedTarget).index()));
    $('[data-animation]').removeClass();
    $('[data-animation]', current).each(function () {
        var $this = $(this);
        var anim_ = $this.data('animation');
        animateElement($this, anim_);
    });
});

Check out the Fiddle Demo

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

Can `display:none` and `display:inline` be used to reveal a hidden element nested within another?

If I want to change the appearance of certain classes with CSS, I can do so in the following code: <ul class="productText"> <li>Thycotic Secret Server <span id="headerControl_VersionNumber" class="VersionNumber">8.8</span>< ...

jqueryhtmlcss

Attempting to create a responsive design for profile pictures and texts

Seeking advice on making my profile picture and About me text responsive, utilizing Bootstrap v5 with percentages for responsiveness. Wondering if there is a more efficient way to ensure the profile picture looks good on phones, tablets, and 1080p screens. ...

htmlcssresponsive-designbootstrap-5

Scrolling down within a Bootstrap modal

I'm working on a bootstrap modal and looking to implement a scroll down feature upon button click: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> ...

javascriptjquerytwitter-bootstrap

Maya model being loaded using Three.js

I've been following a tutorial on how to load Maya models using Three.js, which you can find here. Everything is going smoothly, but the tutorial only covers loading models with a single texture. Below is the source code snippet from the tutorial: ...

javascripthtmlthree.jswebglmaya

Breaking up phrases into separate lines (Bootstrap 4 + Mobile)

On my website, I currently have a sentence that is fully displayed on the Desktop version. However, I am looking to modify it so that it breaks into 2-3 lines when viewed on Mobile using Bootstrap-4. For example, here is the text in question: Our large, ...

htmlcssbootstrap-4

What is the process for incorporating a scrolling feature into my HTML page?

I need to display the following content on my website: What code do I need to add in order to achieve this? I tried using the code snippet below but it did not work as expected: <td nowrap align="left" style="word-wrap: break-word"><pre style="w ...

htmlcss

User Registration - Showing Users Uploading Images

I am currently utilizing a plugin on my Wordpress website that can be found at: https://wordpress.org/plugins/user-registration/ If you wish to showcase a user's selected country, here is a simple code snippet you can use:- <?php global $current_u ...

phphtmlwordpress

Enhancing the Appearance of SAPUI5 Tables

I am still learning CSS and SAPUI5, making progress but struggling with applying styles to SAPUI5 tables. I have been focusing on formatting a specific table with the ID of tbl1. In my index.html file, I have added custom CSS style definitions like: #tbl1 ...

csssapui5

Ways to execute a function when a button is clicked with a shared variable?

When creating buttons in HTML to control video speed, I encountered a strange issue. After successfully implementing the buttons for one video, they only worked on a second video and had no impact on the first one. Deleting the second video seemed to resol ...

javascripthtmljquery

Looking to create a unique custom popup in your React JavaScript project with the power of HTML5

I attempted to access the following links: http://codepen.io/anon/pen/zxLdgz Unfortunately, they didn't work in: I inserted this code in a jsx file <a href="#openModal">Open Modal</a> <div id="openModal" className="modalDialog"> ...

htmlreactjs

Troubleshooting image overlay alignment concerns

My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half. The issue arises when the calculated h ...

jqueryhtmlcss

Adjustable image within a div based on the length of the title when viewed in Edge browser

I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...

htmlcssangular

when the keyboard appears on mobile, ensure that the input element is in focus

Is there a way to automatically scroll the page/form to focus when a user clicks on an input field and the keyboard pops up? I want the input field to be displayed within the current view. I've attempted two solutions, but neither seems to be effecti ...

javascriptjqueryhtmlmobile

Utilizing the 'Day' Function in Visual Basic to alter the date and submit a form according to the day of the week

I have been developing a Windows application that utilizes the WebBrowser control to automate form filling based on specific criteria. One challenge I encountered is with dates on certain forms, where different rules apply depending on the day of the week. ...

javascripthtmlvb.net

How can I make the parent menu active in AngularJS when a submenu is selected?

I have set up the Menu and Submenu in the following way: <li> <a href="#/solution" ng-class="{ current: isActive('/solution') }" > <i class="halflings white home"></i> {{menu.home}} </a> < ...

cssangularjs

Unique style sheet for unique content block

Recently I made some custom modifications to a block by adding style attributes directly into the .phtml file between tags. Now, I am looking to create a separate file for my block so that it can use a custom .css file. Where should I place this new file? ...

cssfrontendblock

Media queries in CSS are not being executed properly when using the `max

Having some trouble fixing the display of a button when adjusting page width in Chrome using inspect and toggle device toolbar. Specifically, when the width is less than 600, the button doesn't show up. Can anyone point out what might be causing this ...

htmlcss

Why is it that vanilla HTML/JS (including React) opts for camelCase in its styling conventions, while CSS does not follow the same pattern

Each type of technology for styling has its own set of conventions when it comes to naming properties, with camelCase and hyphenated-style being the two main options. When applying styles directly to an HTML DOM Node using JavaScript, the syntax would be ...

javascripthtmlcssconventions

"Incorporating a hyperlink into a newly added table row with the help

When utilizing jQuery, I am able to dynamically add rows to a table with each row containing an anchor tag. However, when attempting to populate the anchor tags with links using jQuery, the links do not appear as expected. Strangely enough, the other data ...

javascriptjqueryhtml

What is the process for generating a MediaWiki article that contains preloaded text derived from an HTML form input?

I am in the process of developing a private wiki using MediaWiki, and I have designed a Special page with HTML elements to serve as a template entry form. My goal is to create a new WikiPage based on the input provided by the user, following a similar s ...

phphtmlmediawikimediawiki-extensionsmediawiki-templates