Slow Down CSS Transitions/Animations into "Slow Motion"

Slow down CSS transitions/animations into slow motion

Chrome and Firefox developer tools now support slowing down of many kinds of animations.

Chrome:

In the 'Styles' tab of DevTools, look for an 'Animations' icon that opens up the Animations Inspector. More info:

• Chrome DevTools Animation Inspector
• New animation controls in Chrome Canary

Firefox:

• See documentation on working with animations

How can I slow down my CSS Animated Text transitions?

I guess that's the result that youre looking for:

.slidingVertical span with opacity:0 plus max-width:10px and each word with a positive delay from 0 to 9):

body {  background: pink;  }
.sentence {  display: inline-block;  overflow: hidden;  height: 2em;  vertical-align: top;}
.sentence p {  display: inline-block;}
.slidingVertical {  display: inline-block;  vertical-align: text-top;}
.slidingVertical span {  display: block;  height: 40px;  margin-bottom: -40px;  overflow: hidden;}
.slidingVertical span {  animation: elements 20s infinite linear;  opacity: 0;  max-width: 10px;  }
.slidingVertical span:nth-child(1) {   animation-delay: 0s;  } .slidingVertical span:nth-child(2) {   animation-delay: 2s;  } .slidingVertical span:nth-child(3) {   animation-delay: 4s;  } .slidingVertical span:nth-child(4) {   animation-delay: 6s;  } .slidingVertical span:nth-child(5) {   animation-delay: 8s;  } .slidingVertical span:nth-child(6) {   animation-delay: 10s; } .slidingVertical span:nth-child(7) {   animation-delay: 12s;  } .slidingVertical span:nth-child(8) {   animation-delay: 14s; } .slidingVertical span:nth-child(9) {   animation-delay: 16s;  } .slidingVertical span:nth-child(10) {   animation-delay: 18s;  }
@keyframes elements {  0% {     opacity: 0;     max-width: 10px;    }    6%, 9% {     opacity: 1;     max-width: 400px;   }    12%, 100% {     opacity: 0;     max-width: 10px;  }}

<section class="wrapper">
<h2 class="sentence">Janie is a lovely girl because she is<div class="slidingVertical">    <span>amazing</span>    <span>beautiful</span>    <span>cute</span>    <span>honest</span>    <span>cool</span>    <span>brave</span>    <span>wild</span>    <span>interesting</span>    <span>local</span>    <span>sexy</span></div><p>and cool.</p></h2>
</section>

How to slow down CSS animation on hovering element without jumps?

The issue is that both animations have the same start/end point and different duration. One will be faster than the other BUT they won't have the same state at different time slot.

You can imagine both animations start running at the same time and it's like you hide one and you show the other one.

Here is an example, hover on the first one and you will see it behave like the second one:

.marquee {  height: 30px;  min-width: 1140px;  width: 100%;  overflow: hidden;  position: relative;}
.marquee p {  position: absolute;  height: 100%;  margin: 0;  line-height: 30px;  text-align: center;  transition: all 0.3s ease;  animation: scroll-left 20s linear infinite;}
.marquee.next p,.marquee:hover p  {  animation: scroll-left 30s linear infinite;}
@keyframes scroll-left {  0% {    transform: translateX(100%);  }  100% {    transform: translateX(-100%);  }}

<div class="marquee">  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div><div class="marquee next">  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

CSS animation, how to slow down iterations?

One idea is to simply use multiple animation. Of course, if you want 100+ iteration it won't be the best solution unless you consider SASS/LESS to generate the code.

Here is an example. The delay of each one should be the delay + the duration of the previous one

.box {  width: 50px;  height: 50px;  margin:50px;  background: red;  animation:     shoot-bullet 100ms  linear 0,    shoot-bullet 400ms  linear 100ms reverse,    shoot-bullet 800ms  linear 500ms,    shoot-bullet 1200ms linear 1300ms reverse,    shoot-bullet 1600ms linear 2500ms,    shoot-bullet 2000ms linear 4100ms reverse,    shoot-bullet 2400ms linear 6100ms;}
@keyframes shoot-bullet {  0% {    transform: scale(1.8, 0.8)  }  100% {    transform: scale(1, 1)  }}

<div class="box"></div>

avoiding slow motion when using css keyframes

Try getting rid of the 50% lines:

@-webkit-keyframes topTheleft {
    0% { left: -2px; }
    100% { left: -70px; display: none; }
}
@-o-keyframes topTheleft {
    0% { left: -2px; }
    100% { left: -70px; display: none;  }
}
@-moz-keyframes topTheleft {
    0% { left: -2px; }
    100% { left: -70px; display: none;  }
}
@keyframes topTheleft {
    0% { left: -2px; }
    100% { left: -70px; display: none;  }
}

Slow down CSS Opacity Animation

What you seem to be looking for is CSS Transitions.

Transitions allow you to set a delay and the length of the transition.

Is there a way to slow down the hover effect?

You could add css3 transitions:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

---

Related Topics