Develop Reference

Loop a sequence of css animation

I have the following code:
#keyframes ball1 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(120px);
opacity: 0%;
}
}
#keyframes ball2 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(160px);
opacity: 0%;
}
}
#keyframes ball3 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(200px);
opacity: 0%;
}
}
#keyframes ball4 {
0% {
transform: translateX(0px);
opacity: 0%;
}
50% {
opacity: 100%;
}
100% {
transform: translateX(240px);
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation-duration: 1s;
animation-iteration-count: 1;
}
#ball-1 {
animation-name: ball1;
}
#ball-2 {
animation-name: ball2;
animation-delay: 1s;
}
#ball-3 {
animation-name: ball3;
animation-delay: 2s;
}
#ball-4 {
animation-name: ball4;
animation-delay: 3s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>
I want to achieve to follow:
Sequence starts
Ball 1 animates once.
There is a delay of 1 second.
Ball 2 animates once.
There is a delay of 1 second.
Ball 3 animates once.
There is a delay of 1 second.
Ball 4 animates once.
There is a delay of 1 second.
The sequence restarts from step 1.
This is what I currently have, but I don't know how to loop this sequence, it only plays ones. Not sure if it's possible with only css. If not I'm fine with JS as well.
Example: https://jsfiddle.net/patxh1gn/

do you mean something like this?
#keyframes ball1 {
0%,
12.501% {
transform: translateX(0px);
opacity: 0%;
}
6.25%,
12.502%,
100% {
opacity: 100%;
}
12.5% {
transform: translateX(var(--right));
opacity: 0%;
}
}
.ball {
background: black;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 10px;
animation: ball1 8s infinite;
}
#ball-1 {
--right: 120px;
}
#ball-2 {
--right: 160px;
animation-delay: 2s;
}
#ball-3 {
--right: 200px;
animation-delay: 4s;
}
#ball-4 {
--right: 240px;
animation-delay: 6s;
}
<div class="ball" id="ball-1"></div>
<div class="ball" id="ball-2"></div>
<div class="ball" id="ball-3"></div>
<div class="ball" id="ball-4"></div>

Multiple animation rotate in css at once call in toggle onclick of one element (slow rotate, medium rotate, fast rotate)?

I have 3 animations on css what I've made in fiddle that are "animate1 (as a slow rotate), animate2 (as a medium rotate) and animate3 (as a fastest rotate) which is want to running by toggle onClick on an Element of "<h1>". untiil now of my achievements is just only till running to animate2 only after that I don't know how ? Please to anyone for solve this case and sorry for my bad english ...
demo on fiddle
function Animation() {
var anim = document.getElementsByTagName("h1")[0];
anim.innerText = "|"; anim.className = "animate1";
anim.addEventListener("webkitAnimationEnd", function() {anim.className = 'animate2'});
anim.addEventListener("animationend", function() {anim.className = 'animate2'});
}
#keyframes twister1 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes twister2 {
0% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(360deg);
}
20% {
transform: rotateZ(720deg);
}
30% {
transform: rotateZ(1080deg);
}
40% {
transform: rotateZ(1440deg);
}
50% {
transform: rotateZ(1800deg);
}
60% {
transform: rotateZ(2160deg);
}
70% {
transform: rotateZ(2520deg);
}
80% {
}
90% {
}
100% {
}
}
#keyframes twister3 {
from {
transform-origin: center;
transform: rotate(-20000deg);
opacity: 1;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.animate1 {
-webkit-animation: twister1;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate2 {
-webkit-animation: twister2;
animation-duration: 6s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate3 {
-webkit-animation: twister3;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>

Use only one animation and simply increase/decrease the duration to control the speed:
var i = 7;
var anim = document.getElementsByTagName("h1")[0];
function Animation() {
anim.className = "animate";
anim.style.animationDuration = (i-=2) + 's';
if(i<=0) {
i=7;
}
}
#keyframes twister {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.animate {
animation: twister 5s infinite linear;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>

Trying to make a CSS3 diagonal slide animation, but it's not working as expected

So I'm trying to create a diagonal scroll in CSS3, but I'm having no luck.
The original script is this: https://codepen.io/275845/pen/LoYBjg
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
</style>
<div class="tech-slideshow">
<div class="mover-1"></div>
<div class="mover-2"></div>
</div>
Here's what I've tried so far, with no success: https://codepen.io/275845/pen/gJOjXY
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 2s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px)
}
100% {
transform: translatex(100px) translatey(100px);
}
}
</style>
And here's the result that I'm trying to achieve: https://streamable.com/ltsba
As you can see, I'm trying to make a diagonal slide scrolling in css3, but of course, if anyone could point me out another solution weather it's vanilla javascript, or even jQuery, I'm opened for new suggestions.

You're pretty close, just a few issues.
You don't need 2 "mover", one is enough.
Make it big! And background repeat!
Then you move the size of that background image.
.tech-slideshow > div {
height: 3000px; // BIG
width: 3000px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
bottom: 0;. // position
right: 0;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px);
}
100% {
transform: translatex(255px) translatey(255px); // move size of image
}
}

Move element out of screen and then back with CSS animation

In the following example the goal is to control the element position with smooth slideIn/Out animation. The problem is when the new class is added it overwrites the first one and the second part of animation begins with the reset of element position to 0 and then slidesIn again.
The following snippet will show better what I've tried to explain.
$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

If you remove the animation-delay attribute you have in the .show css that should prevent the visible 0.2s reset, as below
$('.trigger').click(function() {
var target = $('.target');
if (!target.hasClass('hide')) {
target.removeClass('show');
target.addClass('hide');
} else {
target.removeClass('hide');
target.addClass('show');
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0vw);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').css({"transform":"translate(120vw)"});
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

animating background position for multiple background images

Here I am trying to create a background image slider by using jQuery slider by animating its background position.
Here is my html and CSS
<div id="sliderWrapper">
</div>
#sliderWrapper
{
/*background-color: transparent;*/
width: 620px;
height: 349px;
background-image: url(images/1.png), url(images/2.jpg);
background-position: 0px 0px, 620px 0px;
background-repeat: no-repeat,no-repeat;
background-size: cover,cover;
-webkit-background-size: cover,cover;
-moz-background-size: cover,cover;
}
$('#sliderWrapper').animate({
'backgroundPosition':'-620px 0px,0px 0px'
}, 1500);
There animate of backgroundPosition is not working
I read in many blogs to use the following
backgroundPositionX:'-640px';
It works fine with div having single background Images. But I don't know how to work with div's having multiple background Images.

You can set the alternate style in a CSS class, the transition also in the CSS, and just use scripting to toggle the class:
CSS
#test
{
width: 620px;
height: 349px;
background-image: url(image1.jpg), url(image2.jpg);
background-position-x: 0px, 620px;
background-position-y: 0px, 0px;
background-repeat: no-repeat,no-repeat;
background-size: cover,cover;
transition: background-position-x 1.5s;
}
#test.test2 {
background-position-x: -620px, 0px;
}
scripting:
$('#button').click(function () {
$('#test').toggleClass('test2')
})

One option would be use CSS3 transitions and add multiple images with ID's, like so:
HTML
<div id="bg_imgs">
<img src="img1.jpg id="bg1" />
</div>
CSS
#bg_imgs { z-index: -1; /* places the DIV behind the default "layer" on content */ }
#img1 {
-webkit-animation: myanim 5s infinite; /* Chrome, Safari 5+ */
-moz-animation: myanim 5s infinite; /* Firefox 5-15 */
-o-animation: myanim 5s infinite; /* Opera 12.00 */
animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}
#-webkit-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
#-moz-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
#-o-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
#keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}