I have been trying all the morning to make this more smoother:
http://codepen.io/alexrts/pen/jbNrXo
-webkit-animation: pulse 1.4s ease-out;
-moz-animation: pulse 1.4s ease-out;
animation: pulse 1.4s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
As you can see, it looks a little bit robotic.
Does anybody knows if there's a way to do it without javascript?
Best,
Alex
You should make the easing linear
html {
background: #fff;
overflow: hidden;
font-family: Helvetica, Arial;
font-weight: 600;
font-size: 16px;
}
.live-cta {
position: absolute;
top: 45%;
left: 50%;
margin-left: -50px;
}
.live-icon {
position: relative;
width: 40px;
height: 40px;
float: left;
}
.live-text {
position: relative;
float: left;
margin: 12px 0 0 0;
color: #007aff;
}
.live-arrow {
background-image: url("http://s18.postimg.org/u8099c1c5/live_arrow.png");
background-size: 40px 40px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.live-pulse-min {
border: 4px solid #007aff;
background: transparent;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 10px;
width: 10px;
position: absolute;
top: 11px;
left: 11px;
-webkit-animation: pulse 1.4s linear;
-moz-animation: pulse 1.4s linear;
animation: pulse 1.4s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: 1;
opacity: 0;
}
.live-pulse-max {
border: 4px solid #007aff;
background: transparent;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 28px;
width: 28px;
position: absolute;
top: 2px;
left: 2px;
-webkit-animation: pulse2 1.4s linear;
-moz-animation: pulse2 1.4s linear;
animation: pulse2 1.4s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: 1;
opacity: 0;
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
#-webkit-keyframes "pulse2" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
<div class="live-cta">
<div class="live-icon">
<div class="live-arrow"></div>
<div class="live-pulse-min"></div>
<div class="live-pulse-max"></div>
</div>
<div class="live-text">LIVE</dive>
</div>
Try to specify a linear easing by adding this line of css to your specified animations:
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
I edited your code here.
Related
Loading 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. could you please confirm what we can change from our end.
#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;
}
please find the below HTML and Js code for reference. other animation text is for fade out in above css3 defined - delay. css3 code shared above for your reference. i have tried with above approach but sorry it is not working.
<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>
I have a bit of animation which works perfectly in chrome but doesn't on safari. Weird isn't it? Ok here's my code:
<header>
<div class="ripple-1"></div>
<div class="ripple-2"></div>
<div class="ripple-3"></div>
<div class="ripple-4"></div>
<div class="ripple-5"></div>
</header>
Ok this doesn't work in Safari and mobile as I said, there's no movement whatsoever.
Also, still and only in Safari and mobile, on safari its become border squere
What am I doing wrong?
here is my css
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
bottom: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate3d(-50%, 50%, 0);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity;
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
#keyframes ripple{
0%{
transform: translate3d(-50%, 50%, 0) scale(0);
opacity: .33;
}
100%{
transform: translate3d(-50%, 50%, 0) scale(2000);
opacity: 0;
}
}
I tried -webkit-, but didnt work :(
use the below css it will work fine on safari as well.
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
top: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate(-50%, -50%);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity, width;
r
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
#keyframes ripple{
0%{
opacity: .33;
}
100%{
opacity: 0;
height: 2000px;
width: 2000px;
}
}
I have 4 square divs absolute positioned in each corner on the page. I need to animate them to ease into the center to form a circle. I am having a rough time trying to figure out how you would move them diagonally to the center. I have the code below for my html and css. So far I have them all the colors they are suppose to be and I have them set to transition with ease into a border-radius of 50% for one side on each. That way when they move diagonally to the center they can join together to eventually form into a circle. The main issue is just figuring out how to have them ease diagonally into the center. (I am only aloud to use css for this.)I also have what I have tried to accomplish this with in comments in the css code.
<body>
<div class="square_one"></div>
<div class="square_two"></div>
<div class="square_three"></div>
<div class="square_four"></div>
</body>
CSS
/* Layout */
div {
width: 100px;
height: 100px;
animation-name: squareCircle;
animation-duration: 5s;
animation-delay: 1s;
/* animation-iteration-count: infinite; */
transition: background-color 5s ease;
}
#keyframes squareCircle {
to {
background-color: black;
}
}
.square_one {
position: absolute;
top: 0;
left: 0;
animation-name: squareOne;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-right ease 4s;
/* transition: translate 4s; */
/* transform: translate(-50%,-50%); */
}
#keyframes squareOne {
to {
border-bottom-right-radius: 50%;
/* transform: translate(-50%,-50%); */
}
}
.square_two {
position: absolute;
top: 0;
right: 0%;
animation-name: squareTwo;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-left ease 0.5s;
}
#keyframes squareTwo {
to {
border-bottom-left-radius: 50%;
}
}
.square_three {
position: absolute;
bottom: 0%;
left: 0;
animation-name: squareThree;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-right ease 0.5s;
}
#keyframes squareThree {
to {
border-top-right-radius: 50%;
}
}
.square_four {
position: absolute;
bottom: 0%;
right: 0%;
animation-name: squareFour;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-left-radius ease 5s;
}
#keyframes squareFour {
to {
border-top-left-radius: 50%;
}
}
/* Block */
.square_one {
background-color: lightcoral;
}
.square_two {
background-color: lightblue;
}
.square_three {
background-color: lightgreen;
}
.square_four {
background-color: lightgoldenrodyellow;
}
Is this what you are looking to accomplish? :)
div {
width: 100px;
height: 100px;
animation-name: squareCircle;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-delay: 1s;
/* animation-iteration-count: infinite; */
transition: background-color 5s ease;
}
#keyframes squareCircle {
to {
background-color: black;
}
}
.square_one {
position: absolute;
top: 0;
left: 0;
animation-name: squareOne;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-right, top, left ease 4s;
/* transition: translate 4s; */
}
#keyframes squareOne {
to {
border-bottom-right-radius: 100%;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%); */
}
}
.square_two {
position: absolute;
top: 0;
right: 0%;
animation-name: squareTwo;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-left, top, right ease 0.5s;
}
#keyframes squareTwo {
to {
border-bottom-left-radius: 100%;
top: 50%;
right: 50%;
}
}
.square_three {
position: absolute;
bottom: 0%;
left: 0;
animation-name: squareThree;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-right, bottom, left ease 0.5s;
}
#keyframes squareThree {
to {
bottom: 50%;
left: 50%;
border-top-right-radius: 100%;
}
}
.square_four {
position: absolute;
bottom: 0%;
right: 0%;
animation-name: squareFour;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-left-radius, bottom, right ease 5s;
}
#keyframes squareFour {
to {
bottom: 50%;
right: 50%;
border-top-left-radius: 100%;
}
}
/* Block */
.square_one {
background-color: lightcoral;
}
.square_two {
background-color: lightblue;
}
.square_three {
background-color: lightgreen;
}
.square_four {
background-color: lightgoldenrodyellow;
}
<body>
<div class="square_one"></div>
<div class="square_two"></div>
<div class="square_three"></div>
<div class="square_four"></div>
</body>
This is the CSS I wound up with to get the results I needed. Hopefully we are/were able to help anyone with the same or similar issue now or even in the future.
/*Universal*/
.square_one,
.square_two,
.square_three,
.square_four {
height: 100px;
width: 100px;
}
.square_one:hover,
.square_two:hover,
.square_three:hover,
.square_four:hover {
transition: border 0.25s linear;
border: 2px solid white;
}
/*Individual*/
.square_one {
position: absolute;
top: 0;
left: 0;
background: coral;
animation: circle1 3s linear 1 forwards;
}
.square_two {
position: absolute;
top: 0;
right: 0;
background: lightblue;
animation: circle2 3s linear 1 forwards;
}
.square_three {
position: absolute;
left: 0;
bottom: 0;
background: lightgreen;
animation: circle3 3s linear 1 forwards;
}
.square_four {
position: absolute;
right: 0;
bottom: 0;
background: lightgoldenrodyellow;
animation: circle4 3s linear 1 forwards;
}
/*Animation*/
#keyframes circle1 {
0% {
position: absolute;
}
100% {
position: fixed;
top: 50%;
left: 50%;
background: black;
border-radius: 0 0 100px 0;
}
}
#keyframes circle2 {
0% {
position: absolute;
}
100% {
position: fixed;
top: 50%;
right: 50%;
background: black;
border-radius: 0 0 0 100px;
}
}
#keyframes circle3 {
0% {
position: absolute;
}
100% {
position: fixed;
bottom: 50%;
left: 50%;
background: black;
border-radius: 0 100px 0 0;
}
}
#keyframes circle4 {
0% {
position: absolute;
}
100% {
position: fixed;
bottom: 50%;
right: 50%;
background: black;
border-radius: 100px 0 0 0;
}
}
hello i want to make my background move but the animation is not active. Why ?
#keyframes anima {
0% {
background-position-y: 0px;
} 100% {
background-position-y: -150px;
}
}
#bando {
border-radius: 4px;
background-image: url(neon.jpg);
background-size: 130%;
width: 600px;
padding-top:40px;
padding-bottom:40px;
margin-bottom: 10px;
font-size: 30px;
height:150px;
animation-name: anima;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
Thanks in advance to help me because I am blocked on it since 4 hours
try this in https://jsfiddle.net/526vttyg/
You're missing an animation-duration, and you have to specify that, otherwise the animation won't do anything. The default animation-duration is 0
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
#bando {
border-radius: 4px;
background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
background-size: 130%;
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 150px;
animation-name: anima;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
#keyframes anima {
0% {
background-position-y: 0;
}
100% {
background-position-y: -150px;
}
}
<div id="bando"></div>
I'm getting more into animation property and keyframes. Got this loader thing I'm working on. I'm having a hard time getting to go from right to left with animation-delay and multiple animations approach.
This one dot is supposed to go from left > right, right > left.
Stop there for until the other dots pass back the other direction and start again, stop there until the other dots pass back....
My approach is:
Full solution at jsfiddle
body {
background-color: #111111;
}
[data-am-animation] {
box-sizing: border-box;
background-color: white;
flex-direction: row;
margin: 30px;
position: relative;
height: 180px;
width: 120px;
}
[data-am-animation] .dot {
background-color: deepskyblue;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
}
[data-am-animation] .dot.down {
left: 30px;
animation-name: load-down;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
left: 60px;
animation-name: load-up;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
left: 0;
top: 50%;
margin-top: -15px;
/*animation-name: load-through;
animation-duration: ($animation-speed / 2.6);
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-delay: ($animation-speed / 1.3);*/
animation: load-through-right 1.66667s linear infinite 3.125s, load-through-left 1.66667s linear infinite 3.125s;
}
/* keyframes start */
#keyframes load-down {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(0, 150px);
background-color: deeppink;
}
}
#keyframes load-up {
0% {
transform: translate(0, 150px);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
#keyframes load-through-right {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(90px, 0);
background-color: deeppink;
}
}
#keyframes load-through-left {
0% {
transform: translate(90px, 0);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
/* keyframes end */
<div data-am-animation>
<div class="dot through"></div>
<div class="dot down"></div>
<div class="dot up"></div>
</div>
any suggestions for math improvements, I'm all for it.
EDIT
Final result
Here is an approach with single animation. Let me know if it's a direction for you or may I didn't understand your wish.
body {
background-color: #111111;
}
[data-am-animation] {
box-sizing: border-box;
background-color: white;
flex-direction: row;
margin: 30px;
position: relative;
height: 180px;
width: 120px;
}
[data-am-animation] .dot {
background-color: deepskyblue;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
}
[data-am-animation] .dot.down {
left: 30px;
animation-name: load-down;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
left: 60px;
animation-name: load-up;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
left: 0;
top: 50%;
margin-top: -15px;
/*animation-name: load-through;
animation-duration: ($animation-speed / 2.6);
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-delay: ($animation-speed / 1.3);*/
animation: load-through-right 5s linear infinite;
}
/* keyframes start */
#keyframes load-down {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(0, 150px);
background-color: deeppink;
}
}
#keyframes load-up {
0% {
transform: translate(0, 150px);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
#keyframes load-through-right {
0%, 20% {
transform: translate(0, 0);
background-color: deepskyblue;
}
50%, 70% {
transform: translate(90px, 0);
background-color: deeppink;
}
}
#keyframes load-through-left {
0% {
transform: translate(90px, 0);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
/* keyframes end */
<div data-am-animation>
<div class="dot through"></div>
<div class="dot down"></div>
<div class="dot up"></div>
</div>