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

Question

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;
}

Answer 1

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

Answer 2

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;
}