Ways to prevent animations from displaying solely in IE

Is there a way to remove a keyframe animation if the browser is IE, while keeping it for Chrome, Safari, and FireFox?

The animation I am referring to is defined as follows:

// Animations
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { 
    opacity: 0; 
    -webkit-animation: fadeIn ease-in 1; 
    -moz-animation: fadeIn ease-in 1; 
    animation: fadeIn ease-in 1; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    -webkit-animation-duration: .5s; 
    -moz-animation-duration: .5s; 
    animation-duration: .5s;
}
.fade-in.one { 
    -webkit-animation-delay: 0.5s; 
    -moz-animation-delay: 0.5s; 
    animation-delay: 0.5s;
}
.fade-in.two { 
    -webkit-animation-delay: 1.2s; 
    -moz-animation-delay: 1.2s; 
    animation-delay: 1.2s;
}

Fiddle http://jsfiddle.net/mkerny45/6yYC9/

Answer №1

To disable animations, consider using conditional comments. Use JavaScript to add conditional comments for IE10. The code should resemble the following:

<!--[if !IE]><!-->
<script>
// identify IE 10 and add 'ie10' class to HTML element
if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}
</script>
<!-->![endif]-->
<style>
.ie10 .animationclass{}
</style>

View the gist here. See a working demo of the script here.

Answer №2

I recently discovered that IE10 no longer supports conditional comments. .

To work around this, you can use jQuery:

if ($.browser.msie && $.browser.version == 10) {
  $("html").removeClass("someClass");
}

Alternatively, you can use JavaScript:

if(Function('/*@cc_on return document.documentMode===10@*/')()){
  document.documentElement.className ='';
}

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

Button for Toggling Audio Play and Pause

Is it possible to create an SVG image that changes color slightly when hovered over, and when clicked toggles to another SVG image that can be switched back to the original by clicking again with the same hover effect? Additionally, when clicked, it should ...

Having trouble integrating the css and js animation files into my Django project

settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY = '@6qt%i+0&_=z0#zl^+!u3bw6c7dmg4e3khboj%7s7439z9#ky(' DEBUG = True ALLOWED_HOSTS = [] INSTALLED_APPS = [ 'django.contrib.admin& ...

Struggling with evenly positioning 6 elements in two rows using CSS

For positioning 6 different elements on a webpage, I've experimented with various methods: I initially tried stacking two unordered lists vertically but faced issues with scaling when stretching the page. Another attempt was using a table, but I stru ...

I am in search of a container that has full height, along with unique footer and content characteristics

I have set up a jsfiddle to demonstrate the scenario I am facing: There is a basic header, content, footer layout. Within the content-container is a messenger that should expand to a maximum of 100% height. Beyond 100% height, it should become scrollable. ...

bootstrap thumbnail displayed without a border

I have decided to incorporate Bootstrap into my latest project: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS ...

What is the best way to customize the appearance of an XML snippet using Greasemonkey?

I am attempting to customize an XML fragment retrieved from a server response using a Greasemonkey script. Take a look at this sample XML fragment from w3schools.com: <note> <to> Tove</to> <from>Jani</from> <heading ...

Struggling to get the Hover feature on Link from Material-UI to function properly

I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is al ...

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

Ways to adjust the visibility of a div element multiple times using javascript and css

I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...

increase the width of the side menu bar to accommodate more content on the Bootstrap

At the moment, the line that separates the content from the side menu stops at the side menu's content. However, the content is going to be longer than the side menu, causing the page to look uneven. I attempted to adjust the page-content d-flex but d ...

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

How can I use JQuery to select an element with a style attribute in Internet Explorer?

When using JQuery, I have set my target to be the following: <li style="margin-left: 15px;">blah<li> I am using this code to achieve that: $(".block-category-navigation li[style='margin-left: 15px;']").addClass('sub-menu' ...

The Google calendar integration is working, but the appearance leaves much to

I embedded a Google calendar, but I'm having trouble centering it on the page without it overflowing onto the top menu. Can you help me fix this issue? If you'd like to see what I'm referring to, you can visit this link: ...

What is the best way to create a scrollable Material UI modal and dialog?

Having a problem with my mui modal where the top content is getting cut off and I can't scroll up. I've tried adding the {overflow:"scroll"} property to the modal but it's not working. Here's the code snippet I'm currentl ...

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

I'm having trouble changing the class of a single element within a v-for loop based on mouseenter/mouseleave events. I want only the hovered element to change its class, but currently, all elements in the list are affected. I attempted binding the cl ...

The li elements in a horizontal menu all have equal spacing between them, filling the width of the ul

I designed a horizontal menu navigation system using HTML elements ul for the main menu container and li for menu list items. The layout is structured with display table for ul and table-cell for li. However, I encountered an issue where there are inconsis ...

Displaying several modals with a backdrop on top of one another using Bootstrap

My issue involves two modals: one that displays appointment information with a delete button, and another that serves as a warning before deleting. I want the delete-warning modal to overlay a backdrop on the modal beneath it, graying it out. However, both ...

What can I do to prevent a panel from being pushed beneath two other panels when the window size is reduced?

These are my three panels: ___ _________ ___ | | | | | | | | | | | | | | | | | | | | | | | | |___| |_________| |___| When I resize the window slightly, the layout changes: ___ ...

Could a complex, intricate clipping path be created using CSS 3?

Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...

determining the perfect size of a container by analyzing its content

Displayed here is a snapshot of content included in form validation for a website project that's currently in development: The content is currently situated within a div element with its width set to 20%. Initially, without this rule, the div spanned ...