CSS: Continuous animation loop does not smoothly transition between initial and final keyframes

It seems like I have come across an issue with a CSS animation that I can't find a solution for. The animation is supposed to loop infinitely, and while it is working, there is a problem.

// CSS
@keyframes myanim {
    0% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
    25% { transform: translate(5px, 5px) rotate(1deg) skewX(1deg); }
    50% { transform: translate(0, 0) rotate(0eg) skewX(0deg); }
    75% { transform: translate(-5px, -5px) rotate(-1deg) skewX(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
}

// JS
element.style.animation = "myanim " + mytimer + "s infinite";

There seems to be an issue with keyframe interpolation, particularly at the beginning and end of the animation loop. Instead of maintaining a constant rhythm, the animation slows down, jitters, then speeds up again. Is there a way to make all keyframes interpreted in a circular manner for the animation loop to function as intended?

htmlcss

Answer №1

@ JohnDoe is correct, the linear animation property is necessary. I tested the animation and it functions properly, you can view it on this fiddle:

.animated-heading {
  animation: linear myanim 2s infinite;
}

@keyframes myanim {
  0% {
    transform: translate(0, 0) rotate(0deg) skewX(0deg);
  }
  12.5% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg) skewX(0.5deg);
  }
  25% {
    transform: translate(5px, 5px) rotate(1deg) skewX(1deg);
  }
  37.5% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg) skewX(0.5deg);
  }
  50% {
    transform: translate(0, 0) rotate(0eg) skewX(0deg);
  }
  62.5% {
    transform: translate(-2.5px, -2.5px) rotate(-0.5deg) skewX(-0.5deg);
  }
  75% {
    transform: translate(-5px, -5px) rotate(-1deg) skewX(-1deg);
  }
  87.5% {
    transform: translate(-2.5px, -2.5px) rotate(-0.5deg) skewX(-0.5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) skewX(0deg);
  }
}
<h1 class="animated-heading">animated-heading</h1>

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

I am required to filter out any child elements from a find() operation

HTML: <ul> <li class="listExpandTrigger"><h3>2010 - present</h3></li> <li class="listCollapseTrigger"><h3>2010 - present</h3></li> <li> <ul class="volumeList"> <l ...

javascriptjqueryhtmlcss

Generate dynamic DIV elements and populate them with content

Can you assist me in getting this code to function properly? My goal is to dynamically create elements inside a div and fill each element with a value fetched from the database through a server-side function. I'm unsure if there's a better approa ...

javascripthtmlgoogle-apps-scriptdynamic-content

How to set a canvas as the background of a div element

Check out my code snippet below: <!DOCTYPE html> <html> <body> <div id='rect' style='width:200px;height:200px;border:1px solid red'> </div> <canvas id="myCanvas" style="borde ...

javascripthtmlcsscanvas

The shadow is obscured by a block that has an 'overflow: scroll' property

One block on the left displays the list, while another shows detailed information with a shadow effect. The issue arises when the left block has 'overflow: scroll', causing elements' backgrounds to spill over the shadow. .div-left { flo ...

htmlcssoverflowshadow

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css

Incorporating Sass into an HTML document

Recently, I discovered Sass and went through its documentation. I successfully installed the package on my Ubuntu system alongside Ruby and Haml. Now I'm eager to learn how to use it with Wordpress or a basic HTML file. Being new to this, I'm see ...

htmlcsssass

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?

After creating both the desktop and mobile versions of my website, I have a question. How can I determine whether a visitor is using a mobile phone or a PC when they come to my website? Specifically, if a visitor accesses my website through a mobile devic ...

csshtmlwindows-mobileuser-agent

Intrigued by the connection between background and calc()?

Hello everyone! I'm currently involved in a project and have a quick question regarding the calc function. As we all know, it functions perfectly on all browsers... ========== great! ============= background-color:#dfdfdf; background-image:url(..) ...

cssinternet-explorer-11calcbackground-position

Search Bar on the Website for Google Search

I am currently working on a basic website and I'm looking to incorporate Google Search functionality into it. I've managed to create a simple search box that redirects users to the Google Search Results page when they input their query. However, ...

htmlcss

Automatically Modify Uploaded Files on the Server

There is one thing that has caught my attention. I am interested in working with scripts that can automatically edit a file once it's been uploaded. For example, imagine having a form where someone uploads an HTML file. The script would then edit spe ...

phpjavascripthtml

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

javascriptjqueryhtmlcss

CSS universal selector not applying to images

I have scoured through different resources and they all seem to echo the same information. Here is the code in question: *:not(img) { display: none; } Its intended purpose is to hide everything on the page except images. However, it seems to be hiding t ...

htmlcssimage

Choose items in a particular order based on the class name of their category

How can I dynamically select and manipulate groups of elements? My intention is to select and modify the msgpvtstyleme elements, then select the msgpvtstyle elements separately and work with them as well. The ultimate goal is to apply classes to these grou ...

javascriptjquerycss

`Can you teach me how to dynamically load HTML elements using input JSON data?`

What is the best way to iterate through an input array of objects? I currently have data for only 2 people included. However, there are more than 50 people's information in the input and I need to loop through all of them. Here is a sample code snip ...

javascriptjqueryhtmljsonecmascript-6

What is the best way to showcase all tab content within a single tab menu labeled "ALL"?

I have created a tab menu example below. When you click on the button ALL, it will display all the tabcontent. Each tab content has its own tab menu. Thanks in advance! function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = doc ...

javascripthtmlcsstabs

How to customize TextField error color in Material-UI using conditional logic in React

Currently, I am incorporating the React Material-UI library into my project and faced with a challenge of conditionally changing the error color of a TextField. My goal is to alter the color of the helper text, border, text, and required marker to yellow ...

javascripthtmlcssreactjsmaterial-ui

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

javascripthtmlcssreactjsnext.js

A guide on transforming HTML into a variable using JavaScript

Having trouble converting HTML to a JavaScript variable. This is my HTML code: <div onclick="openfullanswer('2','Discription part','This is the code part');"> I want to create this HTML code dynamically, but I&apo ...

javascriptjqueryhtml

Tips for showing text beyond the confines of a <div></div> container

<div class="signup"> <div>Tenxian アカウントに必要な情報</div><br/> </div> <br/><br/><br/><br/><br/><br/> <div align="center">@2009 Tenxian &nbs ...

csshtml

Displaying elements side by side on larger screens and centered on smaller screens

Is there a way to arrange elements next to each other on wider screens, aligning them left and right, while also centering one above the other on narrower screens? Preferably without using media queries: ...

cssbootstrap-4