Is there a way to adjust the speed of the transitions between animations?

Question

Is there a way to adjust the speed of the transitions between animations?

I've been experimenting with ways to increase the time between animations in my cycle.

Adjusting the duration of the keyframes animation hasn't yielded the desired effect.

    span {
     animation: rotateWordsFirst 15s linear infinite 0s;

      &:nth-child(2) { 
        animation-delay: 5s; 
        }

        &:nth-child(3) { 
        animation-delay: 10s; 
             }

        &:nth-child(4) { 
        animation-delay: 15s; 
        }
    }

@keyframes rotateWordsFirst {
     0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

I wanted to display the text for a longer period during each animation, but adjusting it has caused issues with the timing of the cycle.

This website has been helpful in guiding me through this process:

css animation

Answer 1

Answer №1

While working on a complex city animation featuring cars, planes, and trains in motion simultaneously, I encountered a similar issue.

During my exploration, I came across an enlightening article by Chris Coyier:

https://css-tricks.com/css-keyframe-animation-delay-iterations/

The article discusses the animation-delay property, which unfortunately doesn't fully address our needs as it only delays the start of the animation without ongoing control.

To tackle this problem, following the advice from ChrisW and Chris Coyier, we can integrate delays into our keyframe logic like so:

DEMONSTRATION

If my original animation lasts for 4 seconds and I intend to run it indefinitely with a 1-second delay at the end, the total animation time should be adjusted accordingly - combining both durations results in 5 seconds. Implement the following adjustments:

.your-element {
  animation: name-of-your-animation 5s infinite;
}

In terms of the keyframes, assuming we had the previous set-up:

@keyframes name-of-your-animation {
  0% {
    //do something
  }
  25% {
    // do something
  }
  50% {
    //do something
  }
  75% {
    //do something
  }
  100% {
   // do something
  }
}

Considering the 1-second delay, the actual animation should occur over 80% of the total duration (4 out of 5 seconds) or specifically, 80% of the full cycle:

@keyframes name-of-your-animation {
  0% {
    //do something
  }
  50% {
    // do something
    opacity: 0.5;
  }
  /* Adjustments for gradual opacity changes */
  79% {
    opacity: 1;
  }
  /* Maintain final state between 80% and 100%, repeating the 'end state' */
  80%, 100% {
   // do something
   opacity: 1;
  }
}

Feel free to experiment with these suggestions and reach out if you require further assistance. Best regards, G

Answer 2

While working on a complex city animation featuring cars, planes, and trains in motion simultaneously, I encountered a similar issue.

During my exploration, I came across an enlightening article by Chris Coyier:

https://css-tricks.com/css-keyframe-animation-delay-iterations/

The article discusses the animation-delay property, which unfortunately doesn't fully address our needs as it only delays the start of the animation without ongoing control.

To tackle this problem, following the advice from ChrisW and Chris Coyier, we can integrate delays into our keyframe logic like so:

DEMONSTRATION

If my original animation lasts for 4 seconds and I intend to run it indefinitely with a 1-second delay at the end, the total animation time should be adjusted accordingly - combining both durations results in 5 seconds. Implement the following adjustments:

.your-element {
  animation: name-of-your-animation 5s infinite;
}

In terms of the keyframes, assuming we had the previous set-up:

@keyframes name-of-your-animation {
  0% {
    //do something
  }
  25% {
    // do something
  }
  50% {
    //do something
  }
  75% {
    //do something
  }
  100% {
   // do something
  }
}

Considering the 1-second delay, the actual animation should occur over 80% of the total duration (4 out of 5 seconds) or specifically, 80% of the full cycle:

@keyframes name-of-your-animation {
  0% {
    //do something
  }
  50% {
    // do something
    opacity: 0.5;
  }
  /* Adjustments for gradual opacity changes */
  79% {
    opacity: 1;
  }
  /* Maintain final state between 80% and 100%, repeating the 'end state' */
  80%, 100% {
   // do something
   opacity: 1;
  }
}

Feel free to experiment with these suggestions and reach out if you require further assistance. Best regards, G

Is there a way to adjust the speed of the transitions between animations?

Answer №1

Similar questions

The sliding content in the div below the one above it

the division does not span the entire width

Manually controlling line breaks in HTML text

Toggle the visibility of a div depending on the user's selection

The alignment issue persists when attempting to set 'relative' on the parent and 'absolute' on the inner element in a Bootstrap column for bottom alignment

The art of applying styles through styled components

Modify just one of the padding axis while keeping the other constant by utilizing a media query

Arrange three div elements beside each other with the middle column containing two

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

What is the Significance of the Height in This Sample Menu?

Square Power Box

Issue with mix-blend-mode causing text to not show up on top of the gradient

encase the text within a div to create a visual flow

Using the ID selector to create a media query

Adding text on top of images for optimal mobile viewing

How can I design unique navigation menus using HTML, CSS, JavaScript, and jQuery?

Resolving odd SVG anomalies

What is the reason behind the CSS not rendering when async:false is used?

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

Modification of window size using jQuery animations