The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

Having some trouble with CSS animations on mobile devices. The animation works perfectly fine on desktop, but on mobile, it seems to display the final 100% keyframe first before animating from 0%. I've tried adding the initial style directly to the class, but that didn't solve the issue. Any suggestions? Thanks!

.slideLeft {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-name: slideInLeft;
  transform: translate3d(-100%, 0, 0);
opacity: 0;
visibility: visible;
}


@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
        visibility: visible;

    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        visibility: visible;
    }
}
<img src="http://content.mycutegraphics.com/graphics/food/whole-pizza.png" class="slideLeft"/>

csscss-animationskeyframe

Answer №1

.picture{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-name: slideInLeft;
  transform: translate3d(-100%, 0, 0);
visibility: visible;
}


@keyframes slideInLeft {
    9% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;

    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
       
    }
}
<img height="70" src="https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg">

Answer №2

After some investigation, I discovered that the issue was more than just a CSS problem. This particular project had already been constructed when I was brought on board. I found that there was a JavaScript function that was adding a ".start" class to elements as they scrolled into view, triggering a transition effect. To resolve this issue, I implemented my initial solution of including 0% keyframe values in the class so that the elements were properly positioned before the transition began. It took some time, but I managed to identify all the classes with the "start" transition and added the necessary keyframe values.

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

Having trouble with changing images or background images in JavaScript?

Encountering issues with dynamic elements. When I click a button, the following JS function is executed. It displays a stylish CSS alert upon postback and then runs the function. function scrollToTop(sender, args) { window.scrollTo(0, 0); document. ...

javascriptjquerycssimage

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

htmlcssiosswiftwkwebview

Using PHP's header function to alter directories

So I am currently diving into PHP and facing a challenge with using headers. My setup involves using xampp for development purposes. I have a basic form where users can log in on "index.php". Upon successful login, the header function kicks in to redirect ...

phphtmlcss

Having trouble locating the source of the issue causing the product page to appear too wide on Shopify

Can someone assist me in identifying the issue that is causing the product page on this website () to be too wide? Here is an image highlighting the issue. I made some CSS customizations to make the product gallery full width and added padding to the pro ...

cssshopify

troubleshooting responsive design issues with Bootstrap and PHP

this is the issue I'm facing and what I require: Please provide assistance with fixing the code for my website project. What exactly is the problem and how can it be resolved? Thank you. <?php include 'init.php'; $stmt = $con->prepar ...

phphtmlcsstwitter-bootstrap-3

Analyzing registration details stored in an array against user login credentials

With two buttons available - one for sign up and the other for log in, my goal is to gather input form values from the sign-up section into an array. Following this, I aim to compare the user input from the sign-up with that of the log-in, informing the us ...

javascriptjqueryhtmlcssbootstrap-4

Arrange three images and three text lists in a horizontal layout with responsiveness

Struggling with a HTML/CSS challenge here! I'm attempting to vertically align 3 images and text in the pattern of image, text, image, text, image, text. Everything looks great on my 13" MacBook, but once I start resizing the window, chaos ensues. Any ...

htmlcss

How can I locate a div element using multiple class names?

<div class="value test" /> I am trying to locate this specific element on the web page which has two classes assigned to it. Since className does not accept space-separated values, I am exploring alternative ways to achieve this. Any suggestions? ...

javacssseleniumselenium-webdriver

Having issues with CSS list hovering functionality in Google Chrome

One of the challenges I'm facing with my HTML list is that when hovering over each list item, the text along with the bullet point should change color. Here's the structure: <ul> <li>A bullet point</li> <li>Another ...

htmlcsslistgoogle-chrome

challenges with positioning div elements using relative CSS styling

This is a section of my code: CSS : .body .left, .right { position:relative; z-index:6; display:inline-block; } .body .left { top:0; left:0; width:100px; height:300px; margin-right:10px; borde ...

htmlcss

The function .click() fails to execute upon page load, yet it functions successfully when utilized in the console

This is the code I am using: <script> document.getElementById("test").click(); </script> When I try to trigger the click(); function on page load, it doesn't work. However, when I execute it in the console on Firefox, it works ...

javascripthtmljquerycssjquery-events

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

My website is displaying ASCII 3D Text with glitchy lines, but this issue is not present on other websites. Example 1: Glitchy lines visible on my website Example 2: A different website using the same text without any glitchy lines. No glitches detected h ...

javascripthtmlcsswebweb-testing

Fix the Bootstrap navbar that is obstructing the link to content on the page

Currently, I am implementing Bootstrap 4, with a fixed-top navbar at the top of the screen. Everything works perfectly fine, except for one issue when linking to elements on the same page. When I target an element further down the page from one of the nav ...

cssbootstrap-4

Whenever I try to make my links responsive, they don't seem to work as intended

This is the HTML snippet <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ...

htmlcssbootstrap-4

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Why does the Navigation Bar work in Chrome but not in Internet Explorer? Any insights on this issue? The code functions properly in both Internet Explorer and Chrome when tested locally, but fails to load when inserted into my online website editor. Here ...

javascriptjqueryhtmlcssgoogle-chrome

How to Modify Button Backgrounds in Angular 8 after Click Events?

Within my Angular 8 Component, I have implemented a row of 4 buttons using the ant design (antd) library in HTML. My Objective: I aim to modify the background-color of a button when it is clicked. The previously clicked button should revert to its origin ...

htmlcssbuttonangular8background-color

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

javascriptjquerycss

Is there a method to generate an endless carousel effect?

Hello, I am trying to create an infinite carousel effect for my images. Currently, I have a method that involves restarting the image carousel when it reaches the end by using the code snippet progress = (progress <= 0) ? 100 : 0;. However, I don't ...

javascriptcssscrollcarouselinfinite