Is there a way to make the animation switch frames instantaneously without any timing functions like linear? I want the frames to transition directly between values without passing through any in-between stages.
For example:
0% -> top: 20px
100% -> top: 400px
I need it to immediately go to 400px in time t without transitioning through intermediate values like 100, 200, or 245.
You have the option to incorporate animation delay:
.a{
width: 50%;
height: 100px;
position: absolute;
top: 20px;
background-color: #1F8CCA;
margin-top: 20px;
animation:anim 0s 1;
-webkit-animation:anim 0s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
@keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
@-webkit-keyframes anim{
from {top: 20px;}
to {top: 400px;}
}<div class="a">
<div>You can specify multiple animations with various delays. While it may not be the optimal solution, it does get the job done.
.a{
width: 50%;
height: 100px;
position: absolute;
top: 20px;
background-color: #1F8CCA;
margin-top: 20px;
animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
-webkit-animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
animation-fill-mode: forwards;
animation-delay:1s, 2s, 3s;
-webkit-animation-delay:1s, 2s, 3s; /* Safari and Chrome */
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
@keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
@-webkit-keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
@keyframes anim-back{
from {top: 400px;}
to {top: 20px;}
}
@-webkit-keyframes anim-back{
from {top: 400px;}
to {top: 20px;}
}<div class="a">
<div>An alternative option is to utilize step-end as the value for animation-timing-function. This instructs CSS to display the element in its initial state until the specified time elapses, and then immediately switch to the final state. As stated in Mozilla's documentation:
The animation remains in its initial state until the end, after which it transitions directly to its final state. This keyword is equivalent to using the timing function
steps(1, end).
div.box {
position: absolute;
width: 40px;
height: 40px;
top: 40px;
animation-name: changePosition;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#a {
left: 0;
background-color: red;
animation-timing-function: linear;
}
#b {
left: 50px;
background-color: green;
animation-timing-function: step-end;
}
@keyframes changePosition {
0% {
top: 40px;
}
100% {
top: 200px;
}
}<div id="a" class="box"></div>
<div id="b" class="box"></div>If that's the scenario, forget about using animations. Instead, utilize two CSS classes and toggle them with JavaScript as needed. Adjust the TIME_TO_WAIT value to personalize the timing.
const item = document.getElementById('target-item');
const TIME_TO_WAIT = 1000; // adjust this time as needed
setTimeout(() => {
item.classList.add('container__item--moved');
}, TIME_TO_WAIT);.container {
position: relative;
width: 100%;
height: 200px;
background: lightblue;
}
.container__item {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background: red;
}
.container__item--moved {
top: 100px;
}<div class="container">
<div id="target-item" class="container__item">
</div>
</div>I have been working on creating a slider using jQuery and javascript, but I am facing some issues with the autoplay functionality and the next-previous buttons. This slider is intended for displaying images as a title indicates. Can anyone assist me with i ...
Currently, I am diving into Angular programming and encountering an issue with property bindings. Let me share a snippet of my code: // TS FILE data[ {"id": "1", "name": "tester", "rev": "1"}, {"id": "2", "name": "tester", "rev": "1"}, {"id": "3", "name" ...
Experimenting with servlet calls through Ajax functionality using a simple program. A form consisting of a text box and a div with some text. The program takes input from the user, replaces the text inside the div tag. The form looks like this: <form& ...
I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...
Anyone willing to assist me? I'm looking to calculate the total by multiplying the quantity with the single price and displaying it in an ID called total using Ajax (I have limited knowledge of Ajax). $(function () { "use strict"; $('. ...
I recently encountered an issue while trying to create a cookie that would persist for a year. Interestingly, the code I used worked perfectly on Chrome, as I could verify by checking the "Storage" in the dev tools. However, when I tried the same code on F ...
My website consists of various pages named as : page-X.php page-Y.php page-Z.php These three pages mentioned above require unique background colors. However, the remaining pages/posts on my site inherit their background-color from the style.css file. ...
I've been searching for a solution without success. I'm looking to customize the image for my Pinterest (Pin It) button and pin a specific image by URL, not just the current page. Here is the custom link I created: <a href="http://pinterest. ...
Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...
Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...
After a user selects an option from my dropdown list, I want to create a new element. However, the result I'm getting is not what I expected. The current outcome looks like this: As you can see, the link 'remove' gets incremented every time ...
I'm currently working on improving the transition of the cursor for a smoother experience. Right now, the size abruptly changes when hovered over the target element. Any suggestions on how I can achieve a smoother increase in size, with a better anima ...
I am currently troubleshooting the AJAX tabs functionality on my website. The issue I am facing is that the current code does not apply any styling to indicate an active tab. I believe I may need to use some JavaScript code to address this problem, but I ...
I'm facing an issue that I can't seem to figure out. My links (a href = "...") are not functioning properly, could someone please help me identify the mistake? $('.site-nav__item.has-dropdown').on('click tap', function (e ...
I have a project idea where I want to be able to input a hyperlink address and then get a list of attribute contents as the output. For instance, if I input a Netflix genre hyperlink for Adventure Movies, I'd like to receive a list with all the movie ...
Let's frame the question differently: In my Application, I have a button: <div #displayDiv></div> <button (click)="genTable()"></button> The function in the component is as follows: @ViewChild('displayDiv') div: E ...
I am currently developing a web map that requires toggling two GeoJSON layers on and off. In the past, I used Mapbox JS to accomplish this task by adding and removing layers with a custom HTML button click. However, I am facing some challenges in achieving ...
I am developing a form similar to this one: <?php echo '<tr> <td><strong>Match</strong></td> <td width="80px"><strong>1X2</strong></td> <td><strong>Result</strong ...
I'm currently facing a specific issue with my webpage and I will elaborate on what's happening. Within my page, I have created a list containing multiple sections. Here is an example of how it looks: <ul class="menu__list--nested active& ...
Looking to implement a basic pagination feature with data from the backend. Each page should display 10 activities. /feed/1 -> displays 0-10 /feed/2 -> displays 10-20 /feed/3 -> displays 20-30 The goal is to start at page 1 and increment the pag ...