Take a break in between keyframe animations

I have a basic animation set up with keyframes.

    @-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(10deg); }
    25%  { -webkit-transform: rotate(5deg); }
    50%  { -webkit-transform: rotate(10deg); }
    75%   { -webkit-transform: rotate(5deg); }
    100% { -webkit-transform: rotate(10deg); }

}

and

.class { -webkit-animation: rotation 1s infinite; }

Can we insert a break between this keyframe animation? Say, for 5 seconds? I am aware of the -webkit-animation-delay, but that only delays the start of the animation.

P.S. I understand it's just the webkit prefix... eventually, I'll use prefixr to take care of that.

animationcss

Answer №1

After facing this issue on my own and with the assistance of Denny Mueller, I have discovered that the solution lies in stopping before reaching 100% completion.

An effective approach is to introduce a delay at the beginning, which will then adjust itself after the initial iteration based on the remaining time left once the animation concludes.

Below is the snippet I implemented:

@-webkit-keyframes spincube {
    from,to      {                                                    }
    8%,14%       { -webkit-transform: rotateY(-90deg);                }
    24%,30%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    40%,46%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    56%,62%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    72%,78%      { -webkit-transform: rotateX(90deg);                 }
    88%,94%      { -webkit-transform: rotateX(0deg);                  }
}

In this code snippet, you'll notice that I halt at 94% in order to utilize the remaining 6% for pausing on the first frame.

Answer №2

Found a workaround, although it may not be the most elegant solution

@-moz-keyframes rotation {
        0%   { -moz-transform: rotate(10deg); }
        5%  { -moz-transform: rotate(5deg); }
        10%  { -moz-transform: rotate(10deg); }
        15%   { -moz-transform: rotate(5deg); }
        20% { -moz-transform: rotate(10deg); }
        100% { -moz-transform: rotate(10deg); }

    }
.class { -moz-animation: rotation 5s infinite; }

Answer №3

If you are utilizing Mui makeStyles, the following code snippets should be helpful:

import React from 'react';
import { useStyles } from './useStyles';

export const BouncingDots = () => {
  const styles = useStyles();

  return (
    <div className={styles.root}>
      <div className={styles.dot} />
      <div className={styles.dot} />
      <div className={styles.dot} />
    </div>
  );
};


import { makeStyles } from '@material-ui/core/styles';
import { COLORS } from 'src/data/ui';

export const useStyles = makeStyles(
  () => ({
    root: {
      display: 'flex',
      justifyContent: 'center',
      gap: 3,
    },

    dot: {
      width: 5,
      height: 5,
      borderRadius: '50%',
      backgroundColor: COLORS.primary.default,
      animation: '$bounce 1s infinite alternate',

      '&:nth-child(2)': {
        animationDelay: '0.2s',
      },
      '&:nth-child(3)': {
        animationDelay: '0.3s',
      },
    },

    '@keyframes bounce': {
      '0%': {
        opacity: 1,
        transform: 'translateY(0px)',
      },

      //this is a hack to make the dots pause for half of the time
      '50%': {
        opacity: 0.5,
        transform: 'translateY(-4px)',
      },

      '100%': {
        opacity: 0.5,
        transform: 'translateY(-4px)',
      },
    },
  }),
  { name: 'Suggestions' }
);

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

Is there a Wordpress floating bar similar to the one seen on 9gag?

After browsing through some posts on stackoverflow, I noticed that my website is not responding as expected. You can check out my site here: To troubleshoot, you can examine the source code and utilize Firebug to inspect the css and javascript being used ...

javascriptjqueryhtmlcsswordpress

Customizing CSS for tables within a mat-menu in Angular Material

I am currently developing an application using Angular 7 and Angular Material cdk 6. This is my first experience working with Angular Material and I am facing a challenge in overriding the CSS styles of my columns. Despite several attempts, none of them se ...

cssangularangular-material

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle

Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS. Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector. Below is the HTML and CSS co ...

htmlcsssvg

Use Javascript to deactivate the mouse cursor and rely solely on the keyboard cursor for navigation

I am facing an issue with a div that contains a textarea. The cursor is automatically positioned at the beginning of the text within the textarea. I would like to disable the mouse cursor when hovering over the textarea but still be able to navigate within ...

javascriptcss

At what point does IE7 recalculate styles? It seems to have difficulty functioning consistently when a class is applied to the body

Currently facing a peculiar issue. I'm utilizing a class on the element as a toggle switch to control various layout behaviors on my website. When the class is active, specific actions occur; when it's inactive, these actions do not take place. ...

javascriptcssinternet-explorerinternet-explorer-7

Utilize Bootstrap to align two images in the same row and adjust their sizes accordingly

I am looking to display 2 images side by side on a single row, with the ability for them to resize accordingly when adjusting the page size without shifting to another row. Currently, as I decrease the page size, the second image (the black block in the d ...

htmlcsstwitter-bootstrap

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

javascriptjqueryhtmlcssradio-button

Create a stylish design with Bootstrap 3.0 featuring a full-width color background and compact columns perfectly centered on the

As I ventured into creating a business theme with stripes, akin to the one developed by W3Schools and accessible here, I encountered a particular challenge. The layout consisted of horizontal sections with varying background colors. My main concern was th ...

htmlcsstwitter-bootstrap

Achieving overflow behavior in a div with maximum height that contains another div with maximum height (Overflow issue persists)

Currently, I am utilizing Materializecss to showcase a modal window. Within this modal, there is a div Content that showcases items using ng-repeat. However, the issue arises when the content fills up and the css rule for my content-div fails to take effec ...

htmlcss

Styling CSS for circular buttons

I am a newcomer and feeling quite puzzled. When using a div tag with the same width and height along with border-radius: 50%, it always transforms into a circle. However, when attempting to create a circular button using the 'a' tag, it doesn&apo ...

cssbuttongeometry

What is the reason for Sublime 3 highlighting all ID selectors in CSS with yellow?

A single image can convey a multitude of meanings: Sublime 3 (build3083) is highlighting the #something selector as a yellow warning, while .classtag appears to be fine. I don't usually work with CSS, so this issue is quite bothersome. How can I r ...

csssublimetextsublimetext3

Animating jQuery to adjust height based on a percentage

My animation using percentage is not working as expected. It expands to the whole height instantly instead of smoothly transitioning to 100%. Here is my CSS code: #block-views{ overflow:hidden; height:20px; } This is my HTML code: <div id="block-view ...

javascriptjqueryanimationjquery-animate

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

htmlcsswordpressbootstrap-4

The line-height property does not appear to have any effect when used within a table cell

I am struggling to format a table with fonts similar to the one shown in the image. I attempted to set the line-height for numbers to 33%, but so far, the line height has not been as expected. I have been unsuccessful in achieving the layout displayed belo ...

htmlcss

Properly extending the functionality of an HTML widget

Understanding HTML and CSS layout is still a mystery to me, so any guidance on what I'm trying to achieve would be greatly appreciated. I am currently developing a JavaScript API for our company's "widget" so that users can integrate it into the ...

htmlcsscss-float

The X-axis remains visible even after being hidden and still functions properly in mobile view

I've been encountering some minor bugs while working on a website recently. One particular issue I'm struggling to fix involves the x-axis not hiding despite attempts in CSS, especially on mobile view. body { overflow-x: hidden; overflo ...

htmlcssweb

What is the optimal unit to employ in CSS - percentages or pixels?

As someone who is not well-versed in CSS, I strive to create a design that will appear visually appealing across all browsers and screen resolutions. I have observed that certain websites construct their designs using percentages for properties like width, ...

cssresolution

Can you provide some examples of CSS code snippets?

Can someone share some CSS codes similar to :hover that can be used in the : part for different effects? I tried looking it up but couldn't find much, so any help would be greatly appreciated. ...

htmlcsscss-selectors

Clicking outside the div will cause the div to be hidden

Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...

javascriptjqueryhtmlcss