Animated submit/progress buttons with pure css3 - html

How can someone achieve the effect shown here using pure css3.

Using this (pure CSS/without javascript):
Animated progress circle in CSS
Using the :target selector
I create an example, Probably still not what you are looking for, but it was the closest I came.
Example (Demo in jsfiddle):
<style>
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#startupload:target {
/*"disable" button*/
background: transparent;
border: none;
}
#startupload:target div.before {
/*Hide If has hash in url address browser*/
display: none;
}
#startupload div.progress-circle-container {
position: relative;
height: 230px;
width: 230px;
margin: 0 auto;
display: none; /*hide If no Hash in address*/
}
#startupload:target div.progress-circle-container {
display: block; /*Show If Hash in address*/
}
#startupload div.progress-circle-container div.progress-circle-outer {
background-color: #faef85;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(0deg, #d66f0f, #faef85);
background-image: -webkit-linear-gradient(0deg, #d66f0f, #faef85);
background-image: -o-linear-gradient(0deg, #d66f0f, #faef85);
background-image: linear-gradient(0deg, #d66f0f, #faef85);
width: 230px;
height: 230px;
position: absolute;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation: rotate 2.2s infinite linear;
-moz-animation: rotate 2.2s infinite linear;
-o-animation: rotate 2.2s infinite linear;
animation: rotate 2.2s infinite linear;
-webkit-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
-moz-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
}
#startupload:target div.progress-circle-container div.progress-circle-outer.animate {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
#startupload div.progress-circle-container div.progress-circle-inner {
height: 170px;
width: 170px;
margin: 0 auto;
position: absolute;
left: 30px;
top: 30px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background-color: #fff;/*change color background*/
-webkit-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
text-align: center;
}
</style>
<form action="#startupload">
<button id="startupload" type="submit">
<div class="before">
Start upload
</div>
<div class="progress-circle-container">
<div class="progress-circle-outer animate">
</div>
<div class="progress-circle-inner"></div>
</div>
</button>
</form>
Perhaps the ultimate goal to achieve the best is something like:
css3 animations frame by frame

Related

How to control speed and animation of a breathing button using css

I have a breathing button and 2 left and right arrow having animation from left to right and right to left. I need to sync the animation speed of both the left and right arrow with the breathing button.When button will expand need to move both right and left arrow forward towards button and vice versa. Here is the code below
html
<div class="floatleft arrow arrow-right animate-right-to-left">Message2</div>
<button id="breathing-button" class="floatleft">Breathing Button</button>
<div class="floatleft arrow arrow-left animate-left-to-right">Message1</div>
css
#breathing-button {
width: 270px;
padding: 20px;
border: 1px solid #d1d1d1;
animation: breathing 1s ease-out infinite normal;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 8px;
text-align: center;
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
.arrow {
position: relative;
font-size: 13px;
max-width: 100px;
background: #D94F1A;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
top: 15px;
}
.arrow {
visibility: visible;
opacity: 1;
}
.arrow.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #D94F1A;
}
/*left arrow*/
.arrow-left {
border-radius: 0 5px 5px 0;
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #D94F1A;
}
.floatleft{
float:left;
width:100px;
margin-left:10px;
margin-right:10px;
}
Changed breathing keyframes to this
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
Demo
Cleaned your code a little.
#breathing-button {
width: 270px;
padding: 20px;
border: 1px solid #d1d1d1;
animation: breathing 1s infinite forwards;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 8px;
text-align: center;
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
.arrow {
position: relative;
font-size: 13px;
max-width: 100px;
background: #D94F1A;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
top: 15px;
}
.arrow.animate-left-to-right {
animation: move-left-to-right 1s infinite forwards;
}
.arrow.animate-right-to-left {
animation: move-right-to-left 1s infinite forwards;
}
#keyframes move-left-to-right {
0% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
50% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
100% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
50% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
100% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
}
.arrow-right {
border-radius: 5px 0 0 5px;
}
.arrow-left {
border-radius: 0 5px 5px 0;
}
.arrow-right:after, .arrow-left:before {
content: "";
position: absolute;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.arrow-right:after {
right: -20px;
border-left: 20px solid #D94F1A;
}
.arrow-left:before {
left: -20px;
border-right: 20px solid #D94F1A;
}
.floatleft {
float: left;
width: 100px;
margin-left: 10px;
margin-right: 10px;
}

How to rotate box shadow around a text?

I'm studying HTML/CSS and I found a very interesting example of rotating box shadows. I thought I'd try to use it, but I can't get my head around rotating the shadows around my text.
The example I found has a like <div class="rotate-shadows"></div> and CSS like this:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: relative;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);}
100% {transform: rotateZ(360deg) scaleX(1) scaleY(1);}
}
#keyframes rotate-before {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);}
100% {transform: rotateZ(-360deg) scaleX(1) scaleY(1);}
}
<div class="rotate-shadows"></div>
I figured out that I don't need body {}, figured out where I can change the color of the shadows, scale, etc. But I can't get which part is responsible for the shape of the shadows.
Can I make the shadows go around my text like an animated frame:
Классная шляпная шляпа с широкими полями всего за два куська. Да-да!
Это не опечатка! Всего два динозаврических укуса и шляпа ваша!
Where do I need to put my text to have shadows rotating around it?
And how can I change the shape of shadows?
I just want to understand.
If I understood your requirement correctly is this what you need?
I added an extra div inside to wrap the text if that is not an issue? this div acts based on the parent's position. making it in the middle.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: relative;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100% {
transform: rotateZ(360deg) scaleX(1) scaleY(1);
}
}
#keyframes rotate-before {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100% {
transform: rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
<div class="rotate-shadows">
<div id="text">
Once upon a time in Stackoverflow!!
</div>
</div>
If you need the content in the single Div then:
body {
height: 100vh;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: absolute;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
display: flex;
text-align: center;
vertical-align: middle;
top: 50%;
left: 50%;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100% {
transform: rotateZ(360deg) scaleX(1) scaleY(1);
}
}
#keyframes rotate-before {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100% {
transform: rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
<div class="rotate-shadows"> Once upon a time in Stackoverflow!!
</div>

On hover change animation with transition

I need to change the animation with a transition effect. That is change first transition to another with a flow. When I tried for the same the animation changes with a fast change as in below snippet. Is there any way to animate the change in animation. I have tried the below code.
body{
background: url('https://i.pinimg.com/originals/0b/76/08/0b760848c89b9e4abd03f74f19419498.jpg');
}
.bubble{
top: 50px;
left: 80px;
height: 100px;
width: 100px;
color: #000;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.4);
transform: translatey(0px);
cursor: pointer;
position: absolute;
border: 10px solid rgba(255,255,255,0.2);
animation: float 4s ease-in-out infinite;
}
.bubble span {
font-size: 12px;
line-height: 85px;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
text-align: center;
border-radius: 50%;
background: red;
}
.bubble:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border-radius: 50%;
box-shadow: 0 0 rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1),
0 0 0 16px rgba(255, 255, 255, 0.1), 0 0 0 24px rgba(255, 255, 255, 0.1);
z-index: -1;
animation: ripples 1s linear infinite;
animation-play-state: paused;
opacity: 0;
visibility: hidden;
transition: 0.5s;
transform: scale(0.5);
}
.bubble:hover {
transition: all 2s;
animation: tofixed 4s forwards;
box-shadow: none;
border-color: transparent;
}
.bubble:hover:before {
animation-play-state: running;
opacity: 1;
visibility: visible;
transform: scale(1);
}
#keyframes float {
0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
50% { box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); transform: translatey(-20px) scale(1); }
100% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
}
#keyframes tofixed {
to { transform: translatey(0px) scale(0.9); }
}
#keyframes ripples {
to {
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 0 16px rgba(255, 255, 255, 0.1),
0 0 0 24px rgba(255, 255, 255, 0.1), 0 0 0 32px rgba(255, 255, 255, 0);
}
}
<div class="bubble">
<span class="bgviolet">ODOSTORE</span>
</div>
In the above snippet you can see the change in animation is instantly when I hover on it.

Unable to animate transform: scale and box-shadow simultaneously

I need to animate the circle's box-shadow and scale it down to 1 from 1.6x during the same transition period of box-shadow.
The issue I'm facing is the animation of scale is happening after the animation of box-shadow is done.
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s ease infinite;
}
#keyframes rippleeff {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1.4);
}
70% {
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
transform: scale(1);
}
}
<div class="ripple">
</div>
Fiddle
When your transform: scale(1.6), your box-shadow become transparent and after that when you going to scale(1) your box-shadow is animating but you can't see it because it's transparent...so change box-shadow color
Also changed scale value in the code...
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s linear infinite;
}
#keyframes rippleeff {
0% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
}
<div class="ripple">
</div>

CSS Animation sudden move

I have the following JS fiddle: https://jsfiddle.net/ur9bpgbn/163/
.arrow {
position: absolute;
font-size: 16px;
max-width: 350px;
background: #FFF;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center;
color: #000;
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
z-index: 999;
}
.arrow.active {
visibility: visible;
opacity: 1;
}
.arrow.active.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.active.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX (5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
/*right arrow*/
.arrow-right {
border-radius: 0px 0px 0 0px;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFF;
opacity: 0.7;
}
.arrow-right:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #FFF;
opacity: 1;
}
/*left arrow*/
.arrow-left {
border-radius: 0 0px 0px 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFF;
opacity: 0.7;
}
.arrow-left:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #FFF;
opacity: 1;
}
<div id="app">
<a href="https://sporedev.ro" target="_blank">
<div href="#" class="arrow arrow-right animate-right-to-left">This is a text</div>
</a>
<div href="#" class="arrow arrow-left animate-left-to-right" style="margin-top:30%; margin-left:30%;"><span class="room-desc">This is a text</span></div>
</div>
The arrow that moves to the right side works perfectly.
The arrow to the left side has some kind of a glitch, it has a sudden move when it reaches the end of the transition.
I tried applying changes to the CSS in everything related to the left arrow with no effect. The script has some JS that adds the "active" class and I tried removing it to simplify the script and make sure it's not a JS related problem with no effect.
Tried reading up transitions but I didn't found any solutions. I'm sure that I miss something that is CSS related.
How can I make the arrow that points to the left side move smoothly?
Update this part transform: translateX (5%); to transform: translateX (0%);
#keyframes move-left-to-right {
0% {
transform: translateX (0%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(0%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
https://jsfiddle.net/ur9bpgbn/168/
I believe the little jump is the 0-5% which it is not animating so it just jumps