SCSS
$pink: #F6318C;
$green: #2EAC6D;
$grey: #8C999A;
html {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
.input-wrapper {
max-width: 100%;
position: relative;
width: 400px;
.input-text {
border: none;
border-radius: 100px;
box-sizing: border-box;
color: $grey;
font-family: 'Roboto', sans-serif;
font-size: 18px;
height: 52px;
line-height: 52px;
outline: none;
padding: 0 30px;
width: 100%;
}
.input-submit {
background-color: $pink;
border: none;
border-radius: 100%;
font-size: 0;
height: 52px;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 52px;
}
&.active {
.input-text {
animation: inputSuccess 2s ease;
animation-iteration-count: 1;
}
.input-submit {
animation: roll 2s ease, success 2s ease;
animation-iteration-count: 1;
}
}
}
@keyframes roll {
0%,
100% {
right: 0;
transform: rotate(0);
}
50%,
60% {
right: calc(100% - 50px);
transform: rotate(-180deg);
}
}
@keyframes success {
0%,
100% {
background-color: $pink;
}
50%,
60% {
background-color: $green;
}
}
@keyframes inputSuccess {
0%,
100% {
color: $grey;
}
50% {
color: $green;
padding-left: 70px;
}
}
