CSS3 animations may be supported in specific versions of the Android operating system

I am facing an issue with a css3 slider animation not working on Android version 2.3. Can someone help me find a solution for this problem?

It seems that the support for animations in versions 2.3 and 3.0 is limited, as shown on Caniuse web http://caniuse.com/css-animation

Here are some code snippets:

.slider ul {
    width: 1000%;
    height: auto;
    position: relative;
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    -moz-animation:slide-animation 15s infinite;
    -webkit-animation:slide-animation 15s infinite;
}


.slider ul:hover {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}

@-webkit-keyframes slide-animation {
    1% {left: 0%; opacity: 1;}
    18% {left: 0%; opacity: 1}
    19% {opacity: 0.2;}
    20% {left: -100%; opacity: 1;}
    58% {left: -100%; opacity: 1;}
    59% {opacity: 0.2;}
    60% {left: -200%; opacity: 1;}
    98% {left: -200%; opacity: 1;}
    99% {opacity: 0.5;}
    100% {left: 0%;}
}
androidcsscss-animationsandroid-browser

Answer №1

Android version 2.3 is considered to have partial support for CSS3 Animations because it can only modify one property at a time. To work around this limitation, you can separate your properties into individual keyframes:

@-webkit-keyframes slide {
    1%, 18%, 100% { left: 0%; }
    20%, 58% { left: -100%; }
    60%, 98% { left: -200%; }
}

@-webkit-keyframes fade {
    1%, 18%, 20%, 58%, 60%, 98% { opacity: 1; }
    19%, 59% { opacity: 0.2; }
    99% { opacity: 0.5; }
}

.slider ul {
    ...
    -webkit-animation: 15s infinite;
    -webkit-animation-name: slide, fade;
}

Fortunately, Android 4.0 and newer versions have fixed this issue.

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

Reset global variable values with a button press in an Android app

In my code, I have defined a global integer variable 'add' that is used to add the values entered in an editText field named 'e1'. These added values are then displayed in a textView called 't11'. Additionally, there is a butt ...

javaandroid

Dynamic button group with scroll functionality in JavaScript/jQuery

Looking for assistance in creating a button group that includes a left and right arrow to scroll through the buttons when there are more than X amount in the group. The end result should resemble something like this: https://i.sstatic.net/FQXLE.jpg Tried ...

javascriptjqueryhtmlcss

PhoneCallbacks Firebase: The class 'PhoneCallbacks' is not abstract and lacks implementation

Recently, I was given some code by another developer (who is more experienced in PHP and web development) that required updating due to outdated SDKs and libraries. After making the necessary updates, one of the kotlin files started throwing an error that ...

androidfirebasekotlinfirebase-authentication

Incorporating a variety of background images and colors into a navigation bar

Hey there, I could really use some assistance with a design challenge I'm facing. My goal is to have a navigation bar with two different background colors - most of the list items should have a red background, while one specific item needs to have a b ...

htmlcssmenunavigation

Implementing a loading indicator when retrieving data from the latest Room persistence library, complete with success and failure callbacks

While working with Room for my local database, I encountered an issue with the lack of callback functions like success or failure. How do you handle this situation? Also, I want to display a loader while fetching data from Room, but I'm aware that upd ...

javaandroidandroid-room

Uploading a File to MySQL with Json, Gson, InputStream, and HttpPost

My current Android app has a Camera feature, and I am now exploring the possibility of saving images to MySQL. Is it possible to convert an image into a JsonObject, then into a String, send the string via Http Post, and then transform it back into JSON, ...

androidmysqljsonhttp-postinputstream

Can you provide me with information on how to indicate the activated menu item by highlighting the triggering button in Angular 14 and Material Design?

Is there a way to highlight the triggering button in an Angular Material menu, while also highlighting a menu item that matches a routerLink? <button mat-button [matMenuTriggerFor]="animals">Animal index</button> <mat-menu #animals ...

cssangularangular-materialmenu

Ways to delete a CSS attribute with jquery

Is there a way to eliminate a CSS property from a class without setting it to null? Let's say I have a class called myclass with the property right:0px. I want to completely remove right:0px from my class, not just set it to null. How can I achieve th ...

javascriptjqueryhtmlcss

The process of linking the selected GridView image to the ImageView is not functioning properly

I am facing an issue with setting the ImageView to display the selected picture from the GridView. Even though the correct index is displayed in a Toast message when a thumbnail is clicked, the ImageView remains blank. I have tried different solutions with ...

androidandroid-imageviewandroid-gridview

The background-size property fails to function properly on mobile devices

It's really puzzling why this issue is happening, perhaps it's due to my fatigue. The problem lies in the fact that the "background-size" property isn't functioning on my mobile devices; however, it works perfectly when I try to simulate it ...

htmlcssmobile

How can horizontal scrollbars be integrated on Android devices?

Is there a recommended way to add horizontal scroll bars on Android apps? Are there any specific guidelines or sample code available for this functionality? ...

android

number of elements chosen for an xpath query using the chrome console

Is there a way to find the number of nodes selected with an xpath in the Chrome console? I managed to select a group of nodes using the xpath: $x("//*[@rel='noopener noreferrer']") in the Chrome console. However, I am unable to determine the c ...

cssseleniumxpathgoogle-chrome-devtools

Create a layout that features a linear arrangement of text and image views, with the images

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="horizontal"> <TextView android:layout_width="match_parent" ...

javaandroidandroid-layoutandroid-imageview

The MvxAutoCompleteTextView dropdown constantly resets with each new key pressed

Every time the user presses a key, my AutoCompleteTextView quickly disappears and reappears with updated values. Can you pinpoint the issue in my code? See below for the binding, AXML layout, and view model code: Binding in the View: bindingSet .Bind( ...

androidxamarinmvvmcrossautocompletetextview

Exploring cloud photos on an Android browser with the help of FileReader

This snippet of javascript code creates an image upload button and displays the uploaded image: function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { ...

javascriptandroidfilereader

Include a point of interest marker in a background

Is there a way to add markers with text, similar to embedded poi markers? In the premium edition of version 3 SDK, I successfully used MapLabeledMarker for this purpose. However, in version 4 (navigate edition), I cannot seem to find anything similar. Wh ...

androidhere-api

How can you detect a dropped Bluetooth connection on an Android device?

I have a project in which I am developing an app that will connect to an Arduino bluetooth device. The main objective is for the Android user to receive a push notification if the phone moves out of range from the Arduino, whether the app is running in the ...

javaandroidxmlbluetooth

Update an element's margin-right value with jQuery

I have designed a basic <ul> list in HTML and applied different margin-right values to each of the <li> elements using CSS (jsFiddle). Here is the HTML code: <ul> <li>First</li> <li>Second</li> <li& ...

javascriptjqueryhtmlcssmargin

The Basic ListView feature on android appears to be malfunctioning on android devices

I need assistance with my Android ListView demo as it is not functioning correctly. Below is the code I am using: main.xml <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:la ...

androidandroid-listview

Link inserted in between spaces

Working with Eloqua. Any ideas on what might be causing a space to appear in a link? The space doesn't show up during testing, only in the live version. Here is the code snippet: <p style="line-height:18px;"> <font face="calibri, Arial, H ...

htmlcssfontshyperlinkhtml-email