Loop a sequence of css animation - javascript

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>

Related

Spining icon not rotating in the iOS version 15.3 + but working fine in lower 15.3 version

spining icon not spinning in the iOS version > 15.3 or 16.1 but it is working fine in the lower < 15 iOS version iphone and ipad and Android, browser.
Please find the below css code for reference. i have tried with webkit for safari and also tried with transform: rotate(-360deg). but spinner is not spinning/rotating in the iOS device alone. please help me for fixing this issue.
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
/* spinner Wrapper */
.Wrapperspinner{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
line-height: 30px;
margin-left: 0;
margin-top: 0;
text-align: center;
color: #fff;
padding-top: 7px;
background-color: rgba(250, 250, 250, 0.8);
opacity: 0.8;
display: none;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 110px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%)
}
/* Spinning circle (inner circle) */
.loading .maskedCircle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #ff6969;
}
/* Spinning circle mask */
.loading .mask {
width: 25px;
height: 25px;
overflow: hidden;
margin: -3px;
}
/*waiting text*/
.loading .spinnerWaitingText {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
/* Spinner */
.loading .spinner {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
border-radius: 50%;
border: 3px solid #12779a;
}
div.tc-screenMask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000;
opacity: 0.3;
display: none;
}
.SpinnerStep1,
.SpinnerStep2,
.SpinnerStep3{
opacity: 0;
text-align: center;
position: absolute;
width: 100%;
}
.SpinnerContainer{
position: fixed;
top: calc(50% + 90px);
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
min-width: 300px;
visibility: hidden;
}
.SpinnerStep1 {
animation-name: fadeInOut1;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep2 {
animation-name: fadeInOut2;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut2;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep3 {
animation-name: fadeInOut3;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-name: fadeInOut3;
-webkit-animation-duration: 9s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
95% {opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
50% { opacity: 0 }
51% { opacity : 1}
95% { opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
66% { opacity: 0 }
67% { opacity: 1 }
100% { opacity: 1 }
}
#-webkit-keyframes fadeInOut1 {
0% { -webkit-opacity: 0 }
1% { -webkit-opacity: 1 }
95% {-webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut2 {
0% { -webkit-opacity: 0 }
50% { -webkit-opacity: 0 }
51% { -webkit-opacity : 1}
95% { -webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut3 {
0% { -webkit-opacity: 0 }
66% { -webkit-opacity: 0 }
67% { -webkit-opacity: 1 }
100% { -webkit-opacity: 1 }
}
.angSpinner.Wrapperspinner {
background-color: #fff;
opacity: 0.9;
display: block;
visibility: hidden;
}
.angSpinner .loading {
width: 148px;
height: 148px;
}
.angSpinner .loading .spinner {
border: none;
width: 148px;
height: 148px;
animation-name: spin;
animation-duration: .8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.angSpinner .loading .maskedCircle {
border: 4px solid #005900;
width: 140px;
height: 140px;
margin: 0;
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.angSpinner .loading .mask {
width: 148px;
height: 35px;
margin: 0;
}
<div id="Wrapper" class="Wrapperspinner"
aria-label="Loading page now">
<div class="loading">
<!-- We make this div spin -->
<div class="spinner">
<!-- Mask of the quarter of circle -->
<div class="mask">
<!-- Inner masked circle -->
<div class="maskedCircle"></div>
</div>
</div>
<div class="loginSpinnerContainer" aria-hidden="true" tabindex="-1">
<div class="boi_label SpinnerStep1">
Contacting to server...
</div>
<div class="boi_label SpinnerStep2">
Authenticating your application...
</div>
<div class="boi_label SpinnerStep3">
Running security checks...
</div>
</div>
<div class="boi_label spinnerWaitingText" aria-hidden="true" tabindex="-1">please wait</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
SLoader.setup({
id: 'WRAPPER',
showMask: 'WRAPPER.CREATE_MASK',
delay: '5'
});
$(document).ready(function() {
SLoader.triggerHide();
$('.main-form').attr('aria-hidden', 'false');
});
Hi.addHook('beforeSubmit', showSpinnerOnSubmit);
Hi.addHook('beforeAjaxButtonActionService', showSpinnerForAjaxButton);
Hi.addHook('postProcessResponse', SLoader.triggerHide);
function showSpinnerOnSubmit(){
$('#WRAPPER$').attr({'role': 'alert', 'aria-live': 'assertive'});
$('.main-form').attr('aria-hidden', 'true');
SLoader.triggerShow();
}
function showLoginSpinner(){
$('.loginSpinnerContainer').css('visibility', 'visible');
$('.spinnerWaitingText').hide();
$('#WRAPPER$').addClass('customSpinner');
}
function showSpinnerForAjaxButton() {
if(document.activeElement.classList.contains('showSpinner_ajaxbutton')) {
SLoader.triggerShowAjax();
}
}
//]]>
</script>

keyframes creating issue when using with jQuery

I am trying to create bubble and also bubble burst on click.I am using two keyframes, One for bubbling, and other is when click on bubble.
Problem is when I click on bubble the effect is showing on wrong areas. Here is my code sample. i can't understand where is the issue is
because of two keyframes timing is wrong. how to adjust click effect where the bubble is exactly click.
$('.bubbles li').on('click',mouseremove, function () {
const thisBubble = $(this);
thisBubble.addClass('bubble-pop');
setTimeout(() => {
thisBubble.hide();
mouseremove(thisBubble);
}, 500);
});
function mouseremove(thisBubble) {
thisBubble.removeClass('bubble-pop');
setTimeout(() => {
thisBubble.show();
}, 500);
}
.bubbles {
padding:0;
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.bubbles li {
position: absolute;
list-style: none;
display: block;
background-image: url('https://www.fundacioarcadi.com/wp-content/uploads/2019/09/bombolla-01.png');
background-size: 20px;
bottom: -100px;
-webkit-animation: square 40s infinite ;
animation: square 40s infinite ;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
li{
background-image: url("https://www.fundacioarcadi.com/wp-content/uploads/2019/09/bombolla-01.png");
background-size: cover !important;
}
.bubbles li:nth-child(1) {
width: 250px;
height: 250px;
left: 10%;
}
.bubbles li:nth-child(2) {
width: 200px;
height: 200px;
left: 40%;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 60s;
animation-duration: 60s;
}
.bubbles li:nth-child(3) {
width: 100px;
height: 100px;
left: 60%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-duration: 60s;
animation-duration: 60s;
}
.bubbles li:nth-child(4) {
width: 160px;
height: 160px;
left: 80%;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 45s;
animation-duration: 45s;
}
.bubbles li:nth-child(5) {
width: 100px;
height: 100px;
left: 50%;
-webkit-animation-delay: 20s;
animation-delay: 15s;
-webkit-animation-duration: 35s;
animation-duration: 35s;
}
.bubbles li:nth-child(6) {
width: 100px;
height: 100px;
left: 10%;
-webkit-animation-delay: 20s;
animation-delay: 15s;
-webkit-animation-duration: 65s;
animation-duration: 65s;
}
.bubbles li:nth-child(7) {
width: 100px;
height: 100px;
left: 90%;
-webkit-animation-delay: 20s;
animation-delay: 45s;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-1080px);
transform: translateY(-1080px);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-1080px) rotate(180deg);
transform: translateY(-1080px) rotate(180deg);
}
}
.bubble-pop {
-webkit-animation: bubblePop 0.4s ease !important;
-moz-animation: bubblePop 0.4s ease !important;
animation: bubblePop 0.4s ease !important;
opacity: 0 !important;
}
#-webkit-keyframes bubblePop {
0% {
-webkit-transform: scale(0.2);
opacity: 1;
}
20% {
-webkit-transform: scale(0);
opacity: 0.6;
}
100% {
-webkit-transform: scale(0.2);
opacity: 0;
}
}
#-moz-keyframes bubblePop {
0% {
-moz-transform: scale(0.2);
opacity: 1;
}
20% {
-moz-transform: scale(0);
opacity: 0.6;
}
100% {
-moz-transform: scale(0.2);
opacity: 0;
}
}
#keyframes bubblePop {
0% {
transform: scale(0.2);
opacity: 1;
}
20% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(0.2);
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

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>

Flip Multiple Images one after another after some Delay

In my website, I want to create a CSS animation where I am trying to flip multiple images one after another after 1sec delay, but it's not working. When the first images flips then second image should flip then thrid and so on
Like this but onload, Each image should flip one after another.
Suppose there are 4 Images 1st image flips with delay:0 then second image flips with delay:1 an so on till fourth Image with delay:4
javascript
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function() {
with(target.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "";
}
target.appendChild(arr[0]);
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotator2";
}
}, 0, target);
};
var target = document.getElementById("rotator2");
var arr = target.getElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
target.addEventListener("animationend", rotateComplete, false);
target.addEventListener("MSAnimationEnd", rotateComplete, false);
}, false);
#stage2 {
margin: 2em auto 1em 50%;
height: 240px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 0 50%;
-moz-perspective: 1200px;
-moz-perspective-origin: 0 50%;
-ms-perspective: 1200px;
-ms-perspective-origin: 0 50%;
}
#rotator2 a {
position: absolute;
left: -151px;
-moz-transform-style: preserve-3d;
}
#rotator2 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#rotator2 a:nth-child(1) img {
-webkit-transform: rotateY(-120deg) translateZ(80px);
-moz-transform: rotateY(-120deg) translateZ(80px);
-ms-transform: rotateY(-120deg) translateZ(80px);
}
#rotator2 a:nth-child(2) img {
-webkit-transform: translateZ(80px);
-moz-transform: translateZ(80px);
-ms-transform: translateZ(80px);
}
#rotator2 a:nth-child(3) img {
-webkit-transform: rotateY(120deg) translateZ(80px);
-moz-transform: rotateY(120deg) translateZ(80px);
-ms-transform: rotateY(120deg) translateZ(80px);
}
#rotator2 a:nth-child(n+4) {
display: none;
}
#-webkit-keyframes rotator2 {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-120deg);
}
}
#-moz-keyframes rotator2 {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-120deg);
}
}
#-ms-keyframes rotator2 {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(-120deg);
}
}
#rotator2 {
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1s;
-moz-transform-origin: 0 0;
-moz-transform-style: preserve-3d;
-moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-moz-animation-duration: 2s;
-moz-animation-delay: 1s;
-ms-transform-origin: 0 0;
-ms-transform-style: preserve-3d;
-ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-ms-animation-duration: 2s;
-ms-animation-delay: 1s;
}
#rotator2:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
}
<div id="stage2">
<div id="rotator2" style="-webkit-animation-name: rotator2; -moz-animation-name: rotator2; -ms-animation-name: rotator2;">
<img src="img/1.jpg" width="280" alt ="1">
<img src="img/2.jpg" width="280" alt ="2">
<img src="img/3.jpg" width="280" alt ="3">
<img src="img/4.jpg" width="280" alt ="4">
<img src="img/5.jpg" width="280" alt ="5">
<img src="img/6.jpg" width="280" alt ="6">
<img src="img/7.jpg" width="280" alt ="7">
<img src="img/8.jpg" width="280" alt ="8">
</div>
</div>
Here the 1st image is continuously fliping

If I understand you correctly, as I said, you can use animation-delay. The value will be
(card index) * animation-duration.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
display: inline-block;
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.flip-card .flip-card-inner {
animation: rotate 3s .3s infinite;
}
.flip-card:nth-child(2) .flip-card-inner {
animation-delay: .6s;
}
.flip-card:nth-child(3) .flip-card-inner {
animation-delay: .9s;
}
.flip-card:nth-child(4) .flip-card-inner {
animation-delay: 1.2s;
}
#keyframes rotate {
0%, 60% {
transform: rotateY(0);
}
10%, 50% {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="cards">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
</body>
</html>
Update
To run it infinite, the animation should calculated differently because it should take care for the back animation.
The calculation is
0.3s (flip animation) * 5 (4 cards + 1 more for delay between iteration) * 2 (back and forth) = 3s.
So each "tick" is 10%. We want to flip it back just in the middle of the animation so it 50%. More 10% for the back animation tick.
Here is the lifecycle:
|---|---|---|---|---|---|---|---|---|---|
|___|___|___|___|___|___|___|___|___|___|
Front w w w w Back w w w w
.3s .3s .3s .3s .3s .3s .3s .3s .3s .3s
|_______________________________________|
3s

You can simply use that code attached below HTML and CSS trick:
<div class="c-searchblock_loop">
<div class="c-searchblock_loop-content">
<div class="c-searchblock_chevron">
<svg class="c-icon">
<use xlink:href="https://www.subachahai.com/dist/assets/icons/icons-sprite.svg#icon-chevron"></use>
</svg>
</div>
<div class="c-searchblock_image -first">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-1.png" alt="tools-1">
</div>
<div class="c-searchblock_image -back -second">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-2.png" alt="tools-2">
</div>
<div class="c-searchblock_image -third">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-3.png" alt="tools-3">
</div>
<div class="c-searchblock_image -back -fourth">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-4.png" alt="tools-4">
</div>
</div>
</div>
CSS:
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-first {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
}
.c-searchblock_image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50% -25px;
transform-origin: 50% 50% -25px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-back.-second {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock_image.-third {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back.-fourth {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock.is-active .c-searchblock_footer,
.c-searchblock.is-active .c-searchblock_loop {
-webkit-transform: translate(0);
transform: translate(0)
}
.c-searchblock_loop {
position: relative;
display: inline-block;
width: 180px;
height: 180px;
-webkit-perspective: 200px;
perspective: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s, -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s
margin: 50px auto;
}
.editMode .c-searchblock_loop {
-webkit-transform: none;
transform: none;
-webkit-transition: none;
transition: none
}
.c-searchblock_loop-content {
width: 100%;
height: 100%;
-webkit-animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite;
animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite
}
.c-searchblock_chevron,
.c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.c-searchblock_chevron svg {
fill: #fff;
width: 120px;
height: 110px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
#-webkit-keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#-webkit-keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}
#keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}

css loader with image in the middle

I have the next code for my loader, is the same at w3school.
css:
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
But if i put an image, the image spin like the css animation, i want a image at the center of the loader.
I use background-image in another div not work.
This is my fiddle

Remove Border property from the #loader_upload2 and add background there.
Your Working Fiddle
#loader_upload2 {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 190px;
height: 190px;
margin: -75px 0 0 -75px;
border-radius: 50%;
width: 140px;
height: 140px;
background: url('https://crunchbase-production-res.cloudinary.com/image/upload/c_pad,h_140,w_140/v1401689124/y1awpmexi2tf9l7eqnyg.jpg');
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}

try this
<div id="loader_upload2">
</div>
<div id="image">
</div>
css
#image{
background: url(https://crunchbase-production-res.cloudinary.com/image/upload/c_pad,h_140,w_140/v1401689124/y1awpmexi2tf9l7eqnyg.jpg) no-repeat;
z-index: 99999;
display: inline-block;
background-size: 100% 100%;
width: 90px;
height: 90px;
position: absolute;
top: 45%;
lefT: 50%;
margin-left: -36px;
}
#loader_upload2 {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 190px;
height: 190px;
margin: -75px 0 0 -75px;
border: 16px solid #808080;
border-radius: 50%;
border-top: 16px solid #85C440;
width: 140px;
height: 140px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
demo:https://fiddle.jshell.net/mhrjnsa1/pcgfo8mx/13/

Categories

Resources