What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

I am looking to create an animation that continues infinitely without returning to its original state after completion, similar to a sun moving animation. Below is a sample project:

.animator3{
-webkit-animation-name:j3;
-webkit-animation-delay:0s;
-webkit-animation-direction:alternate;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-fill-mode: forwards;
transform:translateX();
}
@-webkit-keyframes j3{
0% {transform: rotate(30deg)}

100% {transform: rotate(150deg)}
}
<img src="https://i.hizliresim.com/9m7y5Z.png" style="box-shadow:0 10px 20px rgb(2%,5%,5%); border-radius:50%;" width="255" height="255" id="planet" class="animator3"/>

Currently, the animation reverts to its original state after each run which I do not want. Can someone assist me in resolving this issue?

htmlcssanimation

Answer №1

To make your animation run indefinitely, ensure that you establish a final state that corresponds to the initial one.

Furthermore, since you have chosen "alternate" as the animation method, this indicates that it will transition from A to B and then back from B to A in a recurring pattern. The default option would progress from A to B and then restart the process from A to B.

I have also included 

-webkit-animation-timing-function: linear;
to create an animation effect without acceleration or deceleration.

<style>
.animator3 {
    -webkit-animation-name:j3;
    -webkit-animation-delay:0s;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    transform:translateX();
}
 @-webkit-keyframes j3{
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}
</style>

<img src="https://i.hizliresim.com/9m7y5Z.png" style="box-shadow:0 10px 20px rgb(2%,5%,5%); border-radius:50%;" width="255" height="255" id="planet" class="animator3"/>

I trust this information proves helpful.

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

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

How to use PHP and JavaScript to update a location marker on Google Maps

I'm new to web development and in need of some help, please. I have a code that is supposed to update the marker location with coordinates retrieved from a database. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AP ...

javascriptphphtmlajaxgoogle-maps-api-3

Enhancing Canvas with a JPEG layer using the Caman library

I'm currently working with the Caman library to manipulate an image. My goal is to overlay a jpeg onto the manipulated image, but I'm facing a challenge. Although I can briefly see the jpeg beneath the manipulated image, it quickly gets overlai ...

htmlcanvashtml5-canvascamanjs

Modifying the Position of the Search Box within DataTables by Manipulating DOM Elements

As a newcomer to the jQuery datatables plugin, I am still learning how to use it effectively. I have connected the plugin to my tables using the following code: $(document).ready(function() $('#table_id').dataTable({ }); }); ...

javascriptjquerycssdatatables

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

javascripthtmlcss

The calculator is experiencing issues with JavaScript functionality

Having some trouble developing a calculator using HTML5, CSS, and JavaScript. After passing my HTML and CSS through validators successfully, I encountered issues when adding JavaScript functions to enable the functionality of the buttons on the calculator. ...

javascripthtmlcss

JavaScript Slideshow Transition Techniques

I'm struggling to create a slideshow gallery using Javascript. However, I'm facing an issue where the code instantly jumps from ferrari.jpg to veyron.jpg, completely skipping over lamborghini.jpg. <!DOCTYPE html> <html> <head> ...

javascripthtmlslideshow

Generate listview items containing anchor tags automatically

I am currently developing a web application using Jquery Mobile. After retrieving data from a webservice function, I am utilizing an ajax call to display this data on my webpage. $('[data-role=page]').on('pageshow', function () { var u ...

javascriptjqueryhtmlajaxjquery-mobile

Shifting hues of dots within a grid according to the passing of time

As a newcomer to the world of coding, I have conceptualized an idea for a visually appealing clock. My goal is to visually represent the passage of time throughout the day. To achieve this, I have devised a grid system where each dot on the grid represents ...

javascripthtmlcssarraysmultidimensional-array

Checking the validity of user input statements

When 2 conditions are met, both error links and messages will display on top of each other. If an input is 0, the validation statement for empty inputs will also trigger. Additionally, if one input is not numeric but the other is, PHP will calculate the va ...

phphtmlif-statement

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

In the snippet below, you'll find the HTML code that pulls an array of 6 objects from a database and displays them in a Bootstrap row successfully. <div class="row products"> <?php while($product = mysqli_fetch_assoc($featured)) ...

javascriptphpjqueryajaxhtml

Issue with cross-origin security when applying HTML5 video tag to a webGL texture

I am trying to link a remote video to a texture in WebGL. To allow the video source to be different from the document source, I added Access-Control-Allow-Origin:* to the http headers of the video source. Additionally, I set an anonymous origin for the vid ...

javascripthtmlthree.jswebglcors

Updating a Specific Database Entry in Django Using Multiple Field Values

Hey there, I'm still learning the ropes and haven't had much time to really dive into it yet. My end goal is to create a "check-in/check-out" system by updating a timestamp from NULL to the current time based on employee number and work area. He ...

pythonhtmldjango

Including a drop-down arrow or triangle next to the initial button

In the navigation bar displayed below https://codepen.io/shaswat/pen/XzpRXL Is it possible to create a down triangle or arrow next to the "home" link, which changes direction upward when hovered over? How can this be achieved without modifying any HTML e ...

htmlcss

What is preventing the element from being positioned at the bottom of the container?

I have a vertical bar chart with 5 different colored sub-containers. I'm trying to position the 'chicken' sub-container at the bottom of the bar without any bottom-margin, but so far my attempts have been unsuccessful. When I try using absol ...

htmlcssposition

Incorporate spacing between columns in Bootstrap 5 by adding gutters

I've been exploring ways to incorporate spacing between my columns in Bootstrap 5. I diligently followed the guidelines provided in the documentation, but I'm facing difficulties in adding gutters between my columns. Currently, I am utilizing g- ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to set the minimum width of a div depending on its contents

As I work on my website, I encountered an issue with a div containing a table. The div expands to full width, but when I resize the screen, it shrinks causing the content to overlap. I am looking for a solution where the minimum width of the div adjusts b ...

javascriptjqueryhtmlcss

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

javascripthtmllogoutwindow.openwindow.opener

Can you explain the meaning of this compound CSS selector?

.btnBlue.btnLtBlue Is this referring to an element that has both the classes btnBlue and btnLtBlue applied? ...

csscss-selectors

Vue Quasar Drawer Layout with Bottom Bar

Struggling to implement a footer in my q-drawer. Below is the template and component code I am currently using: <template> <q-layout view="hHh lpR fFf"> <q-header elevated> <q-toolbar> <q-btn flat de ...

cssvue.jsquasar-framework