Continuous CSS Transitions

How to play CSS3 transitions in a loop?

CSS transitions only animate from one set of styles to another; what you're looking for is CSS animations.

You need to define the animation keyframes and apply it to the element:

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Check out the link above to figure out how to customize it to your liking, and you'll have to add browser prefixes.

CSS transition doesn't work when javascript added properties continuous

It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.

function move(){  document.getElementById("box").style.transition = "0s";  document.getElementById("box").style.top = "100px";  setTimeout(function(){    document.getElementById("box").style.transition = "2s";    document.getElementById("box").style.top = "0px";  }, 10);}

#box{  width:100px;  height:100px;  background:red;  position:relative;  top:0px;}

<div id="box" onclick="move()"></div>

Continuous rotation with transform and transitions

DEMO

Technique:

Simple Version: Using a visual similar but less degree value without transition to move degree to a more lesser value to start animation from lower values.

Detailed Version: I have added one more position before pos0 which is pos-1, it has the same visual degree angle as pos11 but the degree value is less then pos0, Also on pos-1 transition is set to none so when you switch from pos11 to pos-1 you wont notice any difference visual but the rotation value would have been set to less then pos0, now you can easily jump from pos-1 to pos0 with smooth clockwise animation -- hope i am explaining it clearly.

How to apply in your workflow: What ever method you are using to switch classes, add a condition while switching from pos11 to pos0 just for a mini sec switch from pos11 to pos-1 then to pos0.

NOTE: I am more familiar with sass so i have used sass in demo below is the less version of the scss i have added:

less:

&.pos-1 {
    -webkit-transition: none;
    -moz-transition:    none;
    -o-transition:      none;
    -ms-transition:     none;
    transition:         none;
    .setRotation (-15deg)
}

How to smoothly do CSS animation without break at the end

You can animate the position of the background, for example, move it to the left by the width of the image, so when the animation ends and starts again, you won’t actually see the difference. In this case, the width of your background image is 26px, therefore, you need to swipe the background to the left to the width of this background. In general, there are a lot of options, it all depends on what task you need to solve.

@keyframes moveSlideshow {
   100% {
     background-position-x: -26px;
   }
}

Also put the desired animation speed.

Pure CSS Continuous Horizontal Span Scroll Without Break Starting On-screen

As you're using a background image, there is a simpler way to do that by animating the background image directly and using a background repeat.

PS: not sure what you mean about "that starts halfway into the animation"

.bg-marquee {
    background-color: blue;
    height: 50px;
    width: 100%;
    background-image: url(https://sligoil.com/wp-content/uploads/2022/02/icons-long-01.svg);
    background-repeat: repeat-x;
    background-size: 1000px auto;
    animation: marquee 5s infinite linear;
}

@keyframes marquee {
    0% { background-position: 0; }
    100% { background-position: -1000px; }
}

<div class="bg-marquee"></div>

---

Related Topics