Animations defined with the @keyframes rule will not function properly in versions of Internet Explorer that

For my web application, I am trying to animate a single icon using KeyFrames CSS.

Here is the CSS code I am currently using:

@keyframes opacity {
    0%   {opacity: 0;filter: alpha(opacity=0);}
    25%  {opacity: 1;filter: alpha(opacity=100);}
    75%  {opacity: 0.5;filter: alpha(opacity=50);}
    100% {opacity: 0;filter: alpha(opacity=0);}
}

Unfortunately, I have noticed that @keyframes does not work in IE 9 or earlier versions.

Does anyone know of an alternative method for achieving keyframe-like animations in IE 9 or older?

htmlcssinternet-explorer

Answer №1

Unfortunately, IE9 and older versions do not support CSS animations with keyframes.

To check browser compatibility for CSS keyframes, click on this link: http://caniuse.com/#search=keyframes

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

inline-block: the first div appears smaller than the second div, creating a gap that is filled within the layout

I need help with aligning three divs, named a, b, and c. Each div is set to 48% width and displayed as inline blocks. Div a will always be shorter than div b, creating a gap between the bottom of a and the top of c. The heights of a and b may vary on diffe ...

htmlcss

Tips for concealing a tooltip once a checkbox becomes enabled

I want to show a tooltip only when a checkbox is disabled. Once the correct format is typed into an input text field, the checkbox should become enabled. Currently, I am able to display the tooltip when the checkbox is disabled, but it does not hide when ...

javascriptjqueryhtmlangularjstwitter-bootstrap

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

javascriptjqueryhtml

Create a PDF document with a custom header and footer by converting an HTML template using itext7

I attempted to utilize the following HTML template in an effort to convert it to a PDF using iText7, however, I am facing an issue where both the header and footer are not aligning to their designated positions. You can view the example I used here. I am s ...

javahtmlcsspdfitext7

Arrange the image in a way that flows smoothly with the text

I want to achieve the effect of having a picture of a Pen positioned behind the text "Create" on the left side. It looks good at full size, but the positioning gets messed up when the screen size is adjusted. How can I make it responsive so that the image ...

csshtmltwitter-bootstrap

How do I customize the appearance of an Element-UI data table in Vue?

I'm struggling to customize the color of an Element UI datatable in my project. I've tried several approaches, but so far, nothing has worked. Here is the code I am currently using: <template> <el-table :data="tableData.filter ...

cssvue.jsvuejs2vue-componentelement-ui

Absolute positioning causes a 100% height container to be displaced from the IE viewport

While my code works seamlessly in Firefox and Safari, Internet Explorer presents a challenge I cannot seem to solve. The Problem: In non-IE browsers, the container displays properly with space around the edges of the viewport. However, in IE, the containe ...

htmlcssinternet-explorerlayout

Creating alternate versions using styled components

What is the most effective method for creating different styles using styled components? This is my current approach: const ButtonStyle = styled.button` padding:8px 20px; border:none; outline:none; font-weight:${props => props.theme.font.heade ...

cssreactjsstyled-components

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

Tips for preventing a table from showing up while scrolling unnecessarily when utilizing a heading with the CSS position property set to 'sticky'

Currently, I am facing an issue with creating a sticky header for my table. The problem arises when the header of the table has rounded edges (top right and top left) along with a box-shadow applied to the entire table. As the user scrolls through the tabl ...

javascriptcssreactjs

Tips for running multiple JavaScript functions within a single <script> tag in a PHP file

When coding, I encountered an issue where one section does not work when two script tags are written like this: <script type="text/javascript> $(document).ready(function(){ $('.data').DataTable(); demo.initChartist(); ...

javascriptphphtml

What is the best way to display the letter X (Clear) in the Chrome INPUT field with the type

A custom application was developed that utilizes an input field of the number type: <input type="number" min="-1000000" max="1000000" step="0.01"> Within Internet Explorer, there is a small "clear" or [X] button on the right side of the input field ...

javascriptjquerycssinputtextbox

execute a MySQL query on the webpage without the need to reload it

My table generation process involves using an if loop, and if data is not found, a textbox is displayed for typing in the necessary data. I also wanted to ensure that when I click outside of the textbox, the data is automatically saved in the database. Ho ...

phpjqueryhtml

I'm currently attempting to search for a city using AngularJS, but I'm encountering some difficulties

Please take a look at this example on Plunker and let me know if you see any issues: Plunker Example ...

htmlangularjs

Pictures are not aligned at the center of the bigger card container

I am facing an issue with centering images on my cards. The containers look fine on PC (centered) when smaller, but on responsive mode they revert back to the larger size and are left aligned. I want the images in the card containers to be centered regardl ...

htmlcssbootstrap-4

Using jQuery to modify CSS properties in the propertyName

With jQuery v1.6.4, I am attempting to dynamically format some objects. Take a look at my code snippet: <html> <head> <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text ...

jqueryhtmlcss

Creating HTML tables with consistent vertical lines and broken horizontal lines

Looking to style an HTML table with unique grid-lines. Wanting continuous horizontal lines (foreground) and interrupted vertical lines (background), overlaid by the horizontal lines. Different line heights, some 1px, others 2px for variety. Vertical lines/ ...

htmlcss

Struggling with grasping the concept of bootstrap scroll spy

I'm struggling to grasp the concept of scrollspy and how it functions. Despite reviewing numerous examples, I remain perplexed, which is why I've come here for help. My understanding is that scrollspy monitors scrolling behavior and triggers cert ...

htmlcssbootstrap-4

Div containing a centered span with a background

<div> <span style= "background: red; text-align: center;"> There seems to be an issue here </span> </div> The text alignment is not functioning as expected. I need the text to be centered along with the background. https://jsfiddl ...

css

Minimize the length of a base64-encoded string within an HTML payload

I am currently utilizing the Amazon python ask-sdk package to work with images, similar to how HTML handles them. You have the option to use an image URL or a base64 string within the code snippet below: { "type": "Image", "source": "<image_url>" ...

htmlalexa-skills-kitask-sdk