Looking for a particular keyframe in a CSS3 animation

I am currently working on a lengthy keyframe CSS3 animation and I am hoping to find a way to easily navigate to a specific keyframe, allowing me to display it and then continue the animation from that point. The play/pause/reverse functions are all functioning well.

Here is my progress so far. While I can start, pause, and reverse the animation, seeking to a particular keyframe seems to be unavailable...

CSS

.myStyle{
    -webkit-animation-name: myStyle-keyframes;
    -webkit-animation-duration: 50000ms;
}
@-webkit-keyframes myStyle-keyframes {
    0% {-webkit-transform:translateX(0px) translateY(0px);}
    0.1% {-webkit-transform:translateX(1.86px) translateY(-0.62px);}
    ...
    100% {-webkit-transform:translateX(182px) translateY(-123px);}
}

JS

document.getElementById('ball').style.webkitAnimationPlayState='paused';

OR

document.getElementById('ball').style.webkitAnimationPlayState='running';

HTML

<svg id="ball" class="myStyle">[...]</svg>
css

Answer №1

To target a precise keyframe, utilize a negative animation-delay value.

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

What is the best way to conceal the bottom portion of an image?

My image in the header overlaps with the next section's features (image-phone). https://i.sstatic.net/4g0SO.jpg I've tried changing the position and z-index types. If I crop the image, it's not ideal and difficult to fix ;) How can I stru ...

htmlcss

When the text exceeds the space available, it will automatically flow into a new column in lower

Is there a way to make text content flow into a column that appears next to it when the window height is decreased? Essentially, I am looking for a solution where the text can smoothly transition to a dynamically created column. Are there any jQuery plugi ...

javascriptjqueryhtmlcssoverflow

Ensure the simulated JavaScript terminal window remains in a static position on the webpage

Hi there! I've recently started learning JavaScript and CSS by working on a project where I've combined some code I forked with my own ideas. You can check out the page I'm working on here: web page for learning. However, I've run into ...

javascripthtmlcss

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

javascriptcssreactjsreact-bootstrap

The Bootstrap 4 navbar appears slim on medium and smaller sized screens

Currently, I am using Bootstrap 4 in combination with Rails 5 to create a collapsing navbar. The functionality of the collapse is working properly, but the size of the collapsed navbar seems to be unusually small. You can see the issue in this screenshot: ...

htmlcsstwitter-bootstrapbootstrap-4

Using the `.animate()` function in JavaScript causes a one-second delay

I'm encountering some difficulties with the .animate() function in Javascript. I'm using it to automatically scroll to an element within a div, which is functioning correctly. However, I am facing an issue where the scrolling freezes for a second ...

javascriptjquerycssanimation

Creating a responsive CSS background image

I am using an image as a background for a class on the left side with a white background. The width of the class is 1368px and the image size is 392px by 600px. I want to fix this image on the left side of the class, making it responsive. Even though I hav ...

jqueryhtmlcss

Arranging a child element within a parent element by placing the child div on the right side of the parent div

I am struggling with positioning a child .div containing rotating images to the right side of its parent (header) .div. I am utilizing the flexbox model for layout purposes. Despite my efforts, the solutions I have come across so far have not yielded the ...

htmlcssflexbox

Consistently showcasing images of varying dimensions that are unfamiliar

Currently, I'm in the process of developing a small web application that uses the Spotify API to fetch and showcase top tracks and artists to users. Each track or artist is presented within a Bootstrap panel, with the title displayed in the header an ...

javascripthtmlcsstwitter-bootstrapvue.js

How can I resize or break the overflowing Bootstrap pagination within the parent div based on the resolution?

When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display. Below is a snippet of my code: <div clas ...

htmlcssbootstrap-4

Issue with list-style-image not displaying properly in Gmail on Chrome browser

Having trouble incorporating images into bullet lists in my email templates, specifically with Chrome. I prefer using list-style-image over background-image on the li tag. Is there a solution for this issue? ul { list-style-image: url('../images/Bull ...

htmlcssgoogle-chromegmailhtml-email

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider

As a beginner, I realized too late that adding code in comments is not an option. Consequently, I decided to create a new question and ask for your assistance once again. To optimize the use of space, I have implemented bxSlider with fixed dimensions (wid ...

javascriptjqueryhtmlcss

Why isn't my HTML list showing up on Firefox mobile browsers?

I am using jQuery mobile version 1.4.2. Here is the code snippet from my page. HTML <ul data-role="listview" class="ui-nodisc-icon ui-alt-icon"> <li><a href="#" >Real Estate in San Jose</a></li> </ul> CSS .ui-list ...

htmlcssjquery-mobile

Challenges with the final child element's CSS styling

Hey everyone, I've recently added the following CSS: #tab-navigation ul li:last-child { background-image: url(../images/tabs-end.gif); background-repeat: no-repeat; color: #fff; display: block; border: 1px solid red; backgrou ...

htmlcss

Exciting CSS3 animation when hovering over Icon Font and Text

Why is the CSS3 Transition not working on the hover effect for both the text and the coffee cup, and why is there a white border at the bottom of the coffee cup? I am looking to remove the border at the bottom of the cup. The entire thing utilizes the Awe ...

css

Changing the table height based on the number of rows using HTML and CSS

<div class="modal-body"> <div class="table-responsive"> <table id="table"> <thead> <tr> <th>...</th> ...

htmlcss

CSS property that determines where a string can be broken into lines based on specific characters

Is it possible to specify characters on which a long string, such as a URL, should break in browsers? For instance: https://www.this-is-my-url.org/upload_dir/2015/01/foo_bar_faq.pdf If the box only allows 40 characters per line, it might break like this ...

htmlcss

A tag that does not adhere to the background color's rgba opacity restrictions

Can you believe what's happening to me? Check out this code snippet. I'm trying to apply an rgba color to my a tag, but it's acting like an rgb color instead of the intended rgba. The text background is solid, but the rest of the background ...

cssbackground-coloropacity

Need to delete the product page link on WooCommerce?

I am currently working on fixing the one-page checkout process and I need to remove a single product link from a product picture. The goal is to have only the checkout link displayed on this page, specifically within a quickview view. After trying out var ...

phpcsswordpressfunctionwoocommerce

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons