We Keep Coding

How to prevent an animated icon from bleeding out from within an input box

I have an input field with a search Icon inside. When the user clicks inside the input field the Icon fades out to the left, in doing so, it bleeds out of the input box.
Is there a way to prevent the search Icon from bleeding out? I don't want the Icon to be visible past the border of the input box.
cshtml page:
<header>
<nav id="navBar" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="search-bar center">
<img id="searchIcon" src="https://svgur.com/i/XUB.svg" class="icon search-icon" />
<input id="searchBox" class="input-text" placeholder="Find games for sale" type="text">
</div>
</nav>
</header>
js:
$('#searchBox').on({
focus: function () {
document.getElementById("searchIcon").classList.remove("fadeRightSearchIcon");
document.getElementById("searchIcon").classList.add("fadeLeftSearchIcon");
},
blur: function () {
document.getElementById("searchIcon").classList.remove("fadeLeftSearchIcon");
document.getElementById("searchIcon").classList.add("fadeRightSearchIcon");
}
});
css:
.search-bar {
position: relative;
}
.search-bar.active .input-text {
max-width: 80%;
border: 1px solid #ccc;
background: #eee;
}
.icon {
position: absolute;
top: -2px;
left: 0;
padding: 13px 15px 13px 11px;
}
.search-icon {
width: 50px;
height: auto;
}
.search-bar .input-text {
height: 45px;
padding: 8px 6px 8px 40px;
max-width: 200%;
border-radius: 25px;
outline: none !important;
border: 2px solid;
width: 550px;
transition-property: padding;
transition-duration: 0.5s;
}
.input-text:active, .input-text:focus {
padding: 8px 6px 8px 15px;
}
.fadeLeftSearchIcon {
animation-name: fadeInLeft;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
.fadeRightSearchIcon {
animation-name: fadeInRight;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.center {
margin: 0 auto;
text-align: center;
display: inline-block;
top: 0;
bottom: 0;
}

Try to change to -25% ,check official site:
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
Result:

Issue with adding a new animation to the text

I have a text which appears when I run contrastShow function like this:
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>
Then I want to animate the text by adding a new class attached to a keyframe animation (using a setTimeout at the very end f the code).
But unexpectedly the text just hides and there is no animation ?!
What I missed and how to fix this?

The heartbeat animation is running, your element is just hidden via opacity. You should set the initial value of .contrast opacity to 1 and use the backwards fill-mode. This way it doesn't fallback to 0 if you overwrite the animation.
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;
top: 1.2vh;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>

Full css ticker : making a loop

I have this code for full css ticker.
Currently, item 1 appears once the list is fully passed, so the list start again.
I'd like to make a "loop". I mean I'd like to get item 1 just after item 4.
Sorry if I'm not clear...
I'd like to know if there is a way to improve with some jquery ?
* {
box-sizing: border-box;
}
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 4em;
background-color: #ffc846;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 4em;
line-height: 4em;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 20s;
animation-duration: 20s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 3em;
font-size: 2em;
color: #333;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">item 1</div>
<div class="ticker__item">item 2</div>
<div class="ticker__item">item 3</div>
<div class="ticker__item">item 4</div>
</div>
</div>

css Synchronise keyframe animations

I'm looking to synchronise the keyframe animation of three different elements.
They are basically three hearts and I want them to follow a heartbeat animation when they are clicked.
When two or more are clicked, I want them to "beat" in sync.
You can check a JSbin here
What I have so far is :
.rating {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 140px;
height: 50px;
padding: 5px 10px;
margin: auto;
border-radius: 30px;
background: #FFF;
display: block;
overflow: hidden;
unicode-bidi: bidi-override;
direction: rtl;
}
.rating:not(:checked)>input {
display: none;
}
/* - - - - - LIKE */
#like {
bottom: -65px;
}
#like:not(:checked)>label {
cursor: pointer;
float: right;
width: 30px;
height: 30px;
display: block;
margin-right: 7.5px;
color: rgba(233, 54, 40, .4);
line-height: 42px;
text-align: center;
transition: color 0.2s;
}
#like:not(:checked)>label:hover,
#like:not(:checked)>label:hover~label {
color: rgba(233, 54, 40, .6);
}
#like>input:checked+label:hover,
#like>input:checked+label:hover~label,
#like>input:checked~label:hover,
#like>input:checked~label:hover~label,
#like>label:hover~input:checked~label {
color: rgb(233, 54, 40);
}
#like>input:checked~label {
color: rgb(233, 54, 40);
animation: 1s heartbeat infinite;
}
#keyframes heartbeat {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
<section id="like" class="rating">
<!-- THIRD HEART -->
<input type="radio" id="heart_3" name="like" value="3" />
<label for="heart_3" class="heart-slider">♥</label>
<!-- SECOND HEART -->
<input type="radio" id="heart_2" name="like" value="2" />
<label for="heart_2" class="heart-slider">♥</label>
<!-- FIRST HEART -->
<input type="radio" id="heart_1" name="like" value="1" />
<label for="heart_1" class="heart-slider">♥</label>
</section>
What is the good way to achieve sync ?
Thank you
EDIT
Following Rounin's answer, here's the updated CSS that gets the job done :
#like {
}
#like:not(:checked) > label {
cursor:pointer;
float: right;
width: 30px;
height: 30px;
display: inline-block;
color: (255, 255, 255);
transition: color 0.2s;
}
#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
color: rgba(252, 108, 133, 1);
}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
color: rgb(252, 108, 133);
}
#like > input:checked ~ label {
color: rgb(252, 108, 133);
}
#heart_1:checked ~ label {
animation: heartbeat1 1s infinite;
}
#heart_2:checked ~ label {
animation: heartbeat2 1s infinite;
}
#heart_3:checked ~ label {
animation: heartbeat3 1s infinite;
}
#keyframes heartbeat1 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
#keyframes heartbeat2 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
#keyframes heartbeat3 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}

You can set up 3 identical animations and style your inputs and labels such that when a new radio button is selected, the old animation stops and the new one begins. That way the hearts will always be in sync:
Working Example:
div {
display: block;
position: relative;
width: 125px;
height: 60px;
box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}
input {
display: none;
}
label {
position: absolute;
display: inline-block;
top: 0;
font-size: 40px;
line-height: 60px;
color: rgba(255, 127, 127, 0.75);
}
label:hover,
label:hover ~ label {
color: rgba(255, 0, 0, 0.75);
}
.like1 {
left: 10px;
}
.like2 {
left: 50px;
}
.like3 {
left: 90px;
}
#like1:checked ~ label {
animation: heartbeat1 0.8s infinite;
}
#like2:checked ~ label {
animation: heartbeat2 0.8s infinite;
}
#like3:checked ~ label {
animation: heartbeat3 0.8s infinite;
}
#keyframes heartbeat1 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
#keyframes heartbeat2 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
#keyframes heartbeat3 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
<div>
<input type="radio" id="like3" name="likes" value="3" />
<label class="like3" for="like3">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>

Modified #Rounin's answer to give you the output you require.
div {
display: block;
position: relative;
width: 125px;
height: 60px;
box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}
input {
display: none;
}
label {
position: absolute;
display: inline-block;
top: 0;
font-size: 40px;
line-height: 60px;
color: rgba(255, 127, 127, 0.75);
}
label:hover,
label:hover~label {
color: rgba(255, 0, 0, 0.75);
}
.like1 {
left: 10px;
}
.like2 {
left: 50px;
}
.like3 {
left: 90px;
}
#like1:checked~label {
animation: heartbeat1 0.8s infinite;
}
#like2:checked~label {
animation: heartbeat2 0.8s infinite;
}
#like3:checked~label {
animation: heartbeat3 0.8s infinite;
}
#keyframes heartbeat1 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
#keyframes heartbeat2 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
#keyframes heartbeat3 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
<div>
<input type="radio" id="like3" name="likes" value="3" />
<label class="like3" for="like3">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>

Safari not always firing animationend with chained animation

I dont know what im doin wrong here.
My animation worked fine till last days. After debugging ive seen the animationend event is not getting fired on my last two animations in the chain.
Fiddle here: https://jsfiddle.net/bn1krph7/
<div class="welcome-container"><div class="welcome-logo"><img src="https://placehold.it/250x250" class="welcome-avatar"></div><div class="welcome-title-container"><span class="welcome-title">Welcome, </span><span class="welcome-user">User!</span></div></div>
$(function() {
var container = $('.welcome-container');
var logo = document.querySelector('.welcome-logo');
logo.addEventListener('animationend', function(e) {
console.log(e.animationName);
}, false);;
setTimeout(function() {
container.addClass('visible');
}, 1000)
});
html, body {
height: 100%;
width: 100%;
}
.welcome-container {
opacity: 0;
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
&.visible {
transition-property: opacity;
transition-duration: 450ms;
opacity: 1;
display: block;
z-index: 1;
}
}
.welcome-logo, .welcome-title-container {
position: relative;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
.welcome-logo {
overflow: hidden;
border-radius: 50%;
border: 16px solid #434c53;
background-color: #ffffff;
transform-origin: center center;
width: 126px;
height: 126px;
transform: translate3d(-50%, 0, 0) scale(0.17);
top: 8.4%;
}
.welcome-avatar {
width: 100%;
height: 100%;
display: block;
opacity: 0;
}
.welcome-user {
opacity: 0;
color: #434c53;
}
.welcome-title {
opacity: 0;
color: #6D7579;
}
.welcome-title-container {
position: absolute;
font-size: 15px;
top: 63.3%;
}
.welcome-container.visible {
.welcome-logo {
animation-fill-mode: forwards;
animation-duration: .6s, .2s, .3s, .1s, .1s, .3s;
animation-name: logoMoveDown, logoSmall1, logoBig1, logoNormal, logoBig2, logoFadeOut;
animation-delay: 0s, 0.1s, 0.3s, 0.6s, 3.1s, 3.2s;
}
.welcome-avatar {
animation-fill-mode: forwards;
animation-duration: .2s;
animation-name: fade-in;
animation-delay: 0.3s;
}
.welcome-user {
animation-fill-mode: forwards;
animation-duration: 1s, .3s;
animation-name: fade-in, fade-out;
animation-delay: 1s, 3.2s;
}
.welcome-title {
animation-fill-mode: forwards;
animation-duration: 1s, .3s;
animation-name: fade-in, fade-out;
animation-delay: 0.8s, 3.2s;
}
}
#keyframes logoMoveDown {
from{
top: 8.4%;
}
to {
top: 39%;
}
}
#keyframes logoSmall1 {
from {
transform: translate3d(-50%, 0, 0) scale(0.17);
}
to {
transform: translate3d(-50%, 0, 0) scale(0.1);
}
}
#keyframes logoBig1 {
0% {
transform: translate3d(-50%, 0, 0) scale(0.1);
border-width: 16px;
}
50% {
border-width: 3px;
}
100% {
transform: translate3d(-50%, 0, 0) scale(1.2);
border-width: 3px;
}
}
#keyframes logoNormal {
from {
transform: translate3d(-50%, 0, 0) scale(1.2);
}
to {
transform: translate3d(-50%, 0, 0) scale(1);
}
}
#keyframes logoBig2 {
from {
transform: translate3d(-50%, 0, 0) scale(1);
}
to {
transform: translate3d(-50%, 0, 0) scale(1.2);
}
}
#keyframes logoFadeOut {
0% {
transform: translate3d(-50%, 0, 0) scale(1.2);
opacity: 1;
}
100% {
transform: translate3d(-50%, 0, 0) scale(0.2);
opacity: 0;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Chrome is working fine. Safari (9.1.2) doesnt work!
Another funny issue ive found: With alt+tab out and back in the animation will get called to end aslong there is no iframe usage. So you cant see in the fiddle demo.