Css on focus animation

Do a CSS animation when user has focus on specific input

Demo jquery Question: I am trying to use CSS animations on an element with a focused input box. I have managed to achieve this with CSS and JavaScript but it only animates the first label on the page.

Do a CSS animation when user has focus on specific input

I have a form that is collecting user’s credit card information. We will focus on this input which is for CVV :

And i have a flipping card which is representing user’s credit card information:

 
 
-->> 
 
-->> 
>
 
 
ccv  
This card is artificially created with your real card information. This card is not real and can not be used.
 
This card can not be used for payment purposes.
 
 
 
 
 

and the following css for this card:

.inspiration < position: fixed; bottom: 0; right: 0; padding: 10px; text-align: center; text-decoration: none; font-family: 'Gill Sans', sans-serif; font-size: 12px; color: #fff; >.card < width: 400px; height: 260px; border: 0 !important; >.flip < width: inherit; height: inherit; transition: 0.7s; transform-style: preserve-3d; -webkit-animation: flip 2.5s ease; animation: flip 2.5s ease; >.front, .back < position: absolute; width: inherit; height: inherit; border-radius: 15px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.3); box-shadow: 0 1px 10px 1px rgba(0,0,0,0.3); -webkit-backface-visibility: hidden; backface-visibility: hidden; background-image: linear-gradient(to right, #111, #555); overflow: hidden; >.front < transform: translateZ(0); >.strip-bottom, .strip-top < position: absolute; right: 0; height: inherit; /* background-image: linear-gradient(to bottom, #ff6767, #ff4545); */ background-image: linear-gradient(to bottom, #3578fa, #0649cb); box-shadow: 0 0 10px 0px rgba(0,0,0,0.5); z-index: -1; >.strip-bottom < width: 200px; transform: skewX(-15deg) translateX(50px); >.strip-top < width: 180px; transform: skewX(20deg) translateX(50px); >.logo < position: absolute; top: 30px; right: 25px; >.investor < position: relative; top: 30px; left: 25px; text-transform: uppercase; >.chip < position: relative; top: 60px; left: 25px; display: flex; align-items: center; justify-content: center; width: 50px; height: 40px; border-radius: 5px; background-image: linear-gradient(to bottom left, #ffecc7, #d0b978); overflow: hidden; >.chip .chip-line < position: absolute; width: 100%; height: 1px; background-color: #333; >.chip .chip-line:nth-child(1) < top: 13px; >.chip .chip-line:nth-child(2) < top: 20px; >.chip .chip-line:nth-child(3) < top: 28px; >.chip .chip-line:nth-child(4) < left: 25px; width: 1px; height: 50px; >.chip .chip-main < width: 20px; height: 25px; border: 1px solid #333; border-radius: 3px; background-image: linear-gradient(to bottom left, #efdbab, #e1cb94); z-index: 1; >.wave < position: relative; top: 20px; left: 100px; >.card-number < position: relative; display: flex; justify-content: space-between; align-items: center; margin: 40px 25px 10px; font-size: 23px; font-family: 'cc font', monospace; >.end < margin-left: 25px; text-transform: uppercase; font-family: 'cc font', monospace; >.end .end-text < font-size: 9px; color: rgba(255,255,255,0.8); >.card-holder < margin: 10px 25px; text-transform: uppercase; font-family: 'cc font', monospace; >.master < position: absolute; right: 20px; bottom: 20px; display: flex; >.master .circle < width: 25px; height: 25px; border-radius: 50%; >.master .master-red < background-color: #eb001b; >.master .master-yellow < margin-left: -10px; background-color: rgba(255,209,0,0.7); >.card < perspective: 1000; >.card:hover .flip < transform: rotateY(180deg); >.back < transform: rotateY(180deg) translateZ(0); background: #9e9e9e; >.back .strip-black < position: absolute; top: 30px; left: 0; width: 100%; height: 50px; background: #000; >.back .ccv < position: absolute; top: 110px; left: 0; right: 0; height: 36px; width: 90%; padding: 10px; margin: 0 auto; border-radius: 5px; text-align: right; letter-spacing: 1px; color: #000; background: #fff; >.back .ccv label < display: block; margin: -30px 0 15px; font-size: 10px; text-transform: uppercase; color: #fff; >.back .terms

How can I make the card flip and stay flipped on the back side while user’s focus is on the #cc_cvv input?

You can use the following depending on the position of your input:

.inspiration < position: fixed; bottom: 0; right: 0; padding: 10px; text-align: center; text-decoration: none; font-family: 'Gill Sans', sans-serif; font-size: 12px; color: #fff; >.card < width: 400px; height: 260px; border: 0 !important; >.flip < width: inherit; height: inherit; transition: 0.7s; transform-style: preserve-3d; -webkit-animation: flip 2.5s ease; animation: flip 2.5s ease; >.front, .back < position: absolute; width: inherit; height: inherit; border-radius: 15px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.3); -webkit-backface-visibility: hidden; backface-visibility: hidden; background-image: linear-gradient(to right, #111, #555); overflow: hidden; >.front < transform: translateZ(0); >.strip-bottom, .strip-top < position: absolute; right: 0; height: inherit; /* background-image: linear-gradient(to bottom, #ff6767, #ff4545); */ background-image: linear-gradient(to bottom, #3578fa, #0649cb); box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5); z-index: -1; >.strip-bottom < width: 200px; transform: skewX(-15deg) translateX(50px); >.strip-top < width: 180px; transform: skewX(20deg) translateX(50px); >.logo < position: absolute; top: 30px; right: 25px; >.investor < position: relative; top: 30px; left: 25px; text-transform: uppercase; >.chip < position: relative; top: 60px; left: 25px; display: flex; align-items: center; justify-content: center; width: 50px; height: 40px; border-radius: 5px; background-image: linear-gradient(to bottom left, #ffecc7, #d0b978); overflow: hidden; >.chip .chip-line < position: absolute; width: 100%; height: 1px; background-color: #333; >.chip .chip-line:nth-child(1) < top: 13px; >.chip .chip-line:nth-child(2) < top: 20px; >.chip .chip-line:nth-child(3) < top: 28px; >.chip .chip-line:nth-child(4) < left: 25px; width: 1px; height: 50px; >.chip .chip-main < width: 20px; height: 25px; border: 1px solid #333; border-radius: 3px; background-image: linear-gradient(to bottom left, #efdbab, #e1cb94); z-index: 1; >.wave < position: relative; top: 20px; left: 100px; >.card-number < position: relative; display: flex; justify-content: space-between; align-items: center; margin: 40px 25px 10px; font-size: 23px; font-family: 'cc font', monospace; >.end < margin-left: 25px; text-transform: uppercase; font-family: 'cc font', monospace; >.end .end-text < font-size: 9px; color: rgba(255, 255, 255, 0.8); >.card-holder < margin: 10px 25px; text-transform: uppercase; font-family: 'cc font', monospace; >.master < position: absolute; right: 20px; bottom: 20px; display: flex; >.master .circle < width: 25px; height: 25px; border-radius: 50%; >.master .master-red < background-color: #eb001b; >.master .master-yellow < margin-left: -10px; background-color: rgba(255, 209, 0, 0.7); >.card < perspective: 1000; >.card:hover .flip < transform: rotateY(180deg); >#cc_cvv:focus + .card .flip < transform: rotateY(180deg); >.back < transform: rotateY(180deg) translateZ(0); background: #9e9e9e; >.back .strip-black < position: absolute; top: 30px; left: 0; width: 100%; height: 50px; background: #000; >.back .ccv < position: absolute; top: 110px; left: 0; right: 0; height: 36px; width: 90%; padding: 10px; margin: 0 auto; border-radius: 5px; text-align: right; letter-spacing: 1px; color: #000; background: #fff; >.back .ccv label < display: block; margin: -30px 0 15px; font-size: 10px; text-transform: uppercase; color: #fff; >.back .terms

  
 
-->> 
 
-->> 
 -->>
 
 
ccv  
This card is artificially created with your real card information. This card is not real and can not be used.

 
This card can not be used for payment purposes.
 
 
 
 

If the Input is located somewhere else, then you might have to use jquery/javascript.

Demo jquery

$('#cc_cvv').focus(function() < $('.card').addClass("active"); >).blur(function() < $('.card').removeClass("active"); >)

.inspiration < position: fixed; bottom: 0; right: 0; padding: 10px; text-align: center; text-decoration: none; font-family: 'Gill Sans', sans-serif; font-size: 12px; color: #fff; >.card < width: 400px; height: 260px; border: 0 !important; >.flip < width: inherit; height: inherit; transition: 0.7s; transform-style: preserve-3d; -webkit-animation: flip 2.5s ease; animation: flip 2.5s ease; >.front, .back < position: absolute; width: inherit; height: inherit; border-radius: 15px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.3); -webkit-backface-visibility: hidden; backface-visibility: hidden; background-image: linear-gradient(to right, #111, #555); overflow: hidden; >.front < transform: translateZ(0); >.strip-bottom, .strip-top < position: absolute; right: 0; height: inherit; /* background-image: linear-gradient(to bottom, #ff6767, #ff4545); */ background-image: linear-gradient(to bottom, #3578fa, #0649cb); box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5); z-index: -1; >.strip-bottom < width: 200px; transform: skewX(-15deg) translateX(50px); >.strip-top < width: 180px; transform: skewX(20deg) translateX(50px); >.logo < position: absolute; top: 30px; right: 25px; >.investor < position: relative; top: 30px; left: 25px; text-transform: uppercase; >.chip < position: relative; top: 60px; left: 25px; display: flex; align-items: center; justify-content: center; width: 50px; height: 40px; border-radius: 5px; background-image: linear-gradient(to bottom left, #ffecc7, #d0b978); overflow: hidden; >.chip .chip-line < position: absolute; width: 100%; height: 1px; background-color: #333; >.chip .chip-line:nth-child(1) < top: 13px; >.chip .chip-line:nth-child(2) < top: 20px; >.chip .chip-line:nth-child(3) < top: 28px; >.chip .chip-line:nth-child(4) < left: 25px; width: 1px; height: 50px; >.chip .chip-main < width: 20px; height: 25px; border: 1px solid #333; border-radius: 3px; background-image: linear-gradient(to bottom left, #efdbab, #e1cb94); z-index: 1; >.wave < position: relative; top: 20px; left: 100px; >.card-number < position: relative; display: flex; justify-content: space-between; align-items: center; margin: 40px 25px 10px; font-size: 23px; font-family: 'cc font', monospace; >.end < margin-left: 25px; text-transform: uppercase; font-family: 'cc font', monospace; >.end .end-text < font-size: 9px; color: rgba(255, 255, 255, 0.8); >.card-holder < margin: 10px 25px; text-transform: uppercase; font-family: 'cc font', monospace; >.master < position: absolute; right: 20px; bottom: 20px; display: flex; >.master .circle < width: 25px; height: 25px; border-radius: 50%; >.master .master-red < background-color: #eb001b; >.master .master-yellow < margin-left: -10px; background-color: rgba(255, 209, 0, 0.7); >.card < perspective: 1000; >.card:hover .flip, .card.active .flip < transform: rotateY(180deg); >.back < transform: rotateY(180deg) translateZ(0); background: #9e9e9e; >.back .strip-black < position: absolute; top: 30px; left: 0; width: 100%; height: 50px; background: #000; >.back .ccv < position: absolute; top: 110px; left: 0; right: 0; height: 36px; width: 90%; padding: 10px; margin: 0 auto; border-radius: 5px; text-align: right; letter-spacing: 1px; color: #000; background: #fff; >.back .ccv label < display: block; margin: -30px 0 15px; font-size: 10px; text-transform: uppercase; color: #fff; >.back .terms

  
 
-->> 
 
-->> 
 -->>
 
 
ccv  
This card is artificially created with your real card information. This card is not real and can not be used.
 
This card can not be used for payment purposes.
 
 
 
 

CSS Animations tips and tricks, CSS Animations make it possible to do incredible things with the elements that make up your documents and apps. However, there are things you might want to do that aren’t obvious, or clever ways to do things that you might not come up with right away. This article is a collection of tips and tricks we’ve found that may …

How to Create Search Input Placeholder Animation on

How to Create Search Input Placeholder Animation on Focus in Advance HTML & CSS No JAVASCRIPT |Source code: https://bit.ly/35fRs0gTopic cover …

Using CSS animations on element containing a focused input box

I am trying to use CSS animations on an element with a focused input box. My use case is a popup box with two or more pages. The «pages» are a single container that slides left/right using CSS transitions.

Everything was great until I wanted to have an input field on page 2 be focused upon navigating to that page. The entire CSS animation gets screwed up. I could try a timeout for the jQuery focus() function I’m using to focus the input box, but I don’t like mixing timeouts with CSS transition times (and am guessing that isn’t the proper thing to do).

I’ve seen this behavior in the latest Chrome/Firefox/IE, and have replicated it in this fiddle:

If you comment the noted focus() line out of it, you can see the intended animation

The relevant code here is just:

I have also tried (and, on my actual project, am now) using a translateX transformation for the CSS animation. Exact same issue.

I don’t think I’ll find a fix to make the input actually properly animate, but I can’t think of any potential workarounds for focusing after the animation. I appreciate any help with this one! Thanks in advance.

You will have to use a CSS transition end event binder here, which will do the job.

$('#next').on( < click: function()< $('.content').addClass('page2'); >>); $(".content").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e)< if($(this).hasClass("page2")) $('#the-input').focus(); >); 

CSS Animations, An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

Animating the labels on input focus with CSS and JavaScript

I have a few input fields and I want their labels to scale down and slide at the top on focus. I have managed to achieve this with CSS and JavaScript but it only animates the first label on the page.

The code JS below uses «querySelector» to target the labels. I’ve also tried using «getElementsByClassName» and «querySelectorAll». What that does is animate all the labels on the page when I focus on just one input field.

I’d like to only animate the label attached to input. Any help with this would be greatly appreciated.

document.addEventListener("change", function(event) < if (event.target && event.target.matches(".js_form-input")) < event.preventDefault(); var inputField = event.target; var inputLabels = document.querySelector(".label-span"); if (inputField.value) < inputLabels.style.top = "-1.5rem"; >else < inputLabels.style.top = "0rem"; >> >);

.input < width: 100%; border: 0; border-bottom: solid 1px grey; padding-left: 1rem; margin-bottom: 2rem; color: $c_pop; padding-bottom: 0.7rem; >.input-label < position: relative; >.label-span < position: absolute; top: 0; left: 1rem; transition: all 0.2s; >.input-label < font-size: 0.9rem; >.input:focus+.label-span

I’ve also tried this JS method:

var inputField = event.target; var inputLabels = document.querySelectorAll(".label-span"); [].slice.call(inputLabels).forEach(function(label) < if (inputField.value) < label.style.top = "-1.5rem"; >else < label.style.top = "0rem"; >>); 

Your CSS is sufficient to get the affect you are after, just remove the javascript. The only problem that I fixed is adding pointer-events: none; to the .label-span elements as they were blocking focus when clicking on them.

Edited to include a check on blur for whether the input is empty or not and maintain the label position if it is full.

const inputs = document.querySelectorAll('.js_form-input'); inputs.forEach(input => < input.addEventListener('blur', (event) => < if (event.target.value.length) < event.target.classList.add("full"); >else < event.target.classList.remove("full"); >>); >)

#container < padding: 2rem 0; >.input < width: 100%; border: 0; border-bottom: solid 1px grey; padding-left: 1rem; margin-bottom: 2rem; color: $c_pop; padding-bottom: 0.7rem; >.input-label < position: relative; >.label-span < position: absolute; top: 0; left: 1rem; transition: all 0.2s; pointer-events: none; >.input-label < font-size: 0.9rem; >.input:focus+.label-span, .input.full+.label-span

I hope, This will solve your problem.

var myform = document.querySelectorAll(".input-label"); Array.from(myform).map(x => < x.addEventListener('change', (e) => < var el = e.target.parentNode.children[1]; if (e.target.value !== "") < el.style.top = "-1.5rem"; >else < el.style.top = "0rem"; >>); >);

* < margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; >.input-container < padding: 20px; >.input < width: 100%; border: 0; border-bottom: solid 1px grey; padding-left: 1rem; margin-bottom: 2rem; color: #000; padding-bottom: 0.7rem; >.input-label < position: relative; >.label-span < position: absolute; top: 0; left: 1rem; transition: all 0.2s; >.input-label < font-size: 0.9rem; >.input:focus+.label-span

Another trick to achieve same result without Javascript.

* < margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; >.input-container < padding: 20px; >.input < width: 100%; border: 0; border-bottom: solid 1px grey; padding-left: 1rem; margin-bottom: 2rem; color: #000; padding-bottom: 0.7rem; >.input-label < position: relative; >.label-span < position: absolute; top: 0; left: 1rem; transition: all 0.2s; >.input-label < font-size: 0.9rem; >.input:focus + .label-span, .input:valid + .label-span

Css Focus on input div appearing, 2 Answers. Sorted by: 27. This is actually possible with pure CSS, if you are able to change your markup slightly. div < background: #f0a; display: none; height: 200px; width: 200px; >input:focus + div < display: block; >What I essentially do, is that first hide the div, and when the input field has focus, the immediate …

Источник

CSS Input Border Animation on Focus

In this tutorial, I’m going to share a pack of cool CSS border animation for the HTML input element. These border animations play on focus event. You can apply these border effects on all types of input except checkbox or radio.

Basically, this is a set of 9 different border effects, comes with dedicated class names like effect-1 to effect-9. After including the CSS, you just need to add a class name to your input element, then the border draw animation starts working when the input gets focus.

Before getting started with coding, have a look at the demo page to see the border animations in action. Which border effect did you like most? well! download this project, load the «style.css» file into your HTML document if you want to integrate all these effects into your project. On the other hand, you can use one of the following CSS snippets related to that effect that you wanna apply to your input.

The HTML Structure

In order to apply the border animation, you just need to add an animation class into your input element. Additionally, you need to create a span element just after the input with a class name «focus-border» . The following is the basic HTML structure for one input border animation.

There are nine different animation effects. The following is the complete HTML structure for all these border animation effects.

Basic CSS Styles for Inputs

Before getting started with input focus animation, first of all, we need to apply some basic CSS style to the input element. So, define the font size, color, width, and box-sizing property as described below:

The first three border animations are similar. So, the common CSS style for first these effects is as follows:

The first border animation is about to increase the width of the bottom border. This effect draws the border from left to right on input focus. Here, the transition property defines the speed of the animation. You can set the custom value for transition in milliseconds.

The second border effect draws the bottom border starting from the center. The CSS styles for the «effect-2» animation is as follows:

.effect-2~.focus-border < position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s; >.effect-2:focus~.focus-border

The third effect draws the border starting from the sides and end in the center. If you want to integrate only this border animation, then you can use the following CSS snippet:

.effect-3~.focus-border < position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99; >.effect-3~.focus-border:before, .effect-3~.focus-border:after < content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #3399FF; transition: 0.4s; >.effect-3~.focus-border:after < left: auto; right: 0; >.effect-3:focus~.focus-border:before, .effect-3:focus~.focus-border:after

Full Border Animation for Input

The second set of effects (effect-4 to effect-6) draw a full border around the input element. The common CSS style for these effects is as follows:

.effect-4, .effect-5, .effect-6 < border: 0; padding: 5px 0 7px; border: 1px solid transparent; border-bottom-color: #ccc; transition: 0.4s; >.effect-4:focus, .effect-5:focus, .effect-6:focus

The effect-4 class draws the border from the bottom to the top of the input. You can use the following CSS in order to integrate this effect. If you want to customize the border color and width, set the custom value for the CSS border property.

.effect-4~.focus-border < position: absolute; height: 0; bottom: 0; left: 0; width: 100%; transition: 0.4s; z-index: -1; >.effect-4:focus~.focus-border

Similarly, the effect-5 class draws the full border from the left to the right of the input.

.effect-5~.focus-border < position: absolute; height: 36px; bottom: 0; left: 0; width: 0; transition: 0.4s; >.effect-5:focus~.focus-border

The effect-6 is opposite to the 5th effect. It draws the full border to the right of the input.

.effect-6~.focus-border < position: absolute; height: 36px; bottom: 0; right: 0; width: 0; transition: 0.4s; >.effect-6:focus~.focus-border

CSS to Randomly Draw Input Border

The following are some border effects to randomly draw a border around the input. This set of effects classes (from effect-7 to effect-9) comes with an attractive user-experience. The common CSS style for these effects is as follows:

.effect-7, .effect-8, .effect-9 < border: 1px solid #ccc; padding: 7px 14px 9px; transition: 0.4s; >.effect-7~.focus-border:before, .effect-7~.focus-border:after

The following effect draws all four borders starting from the center and ending in the sides.

.effect-7~.focus-border:after < top: auto; bottom: 0; >.effect-7~.focus-border i:before, .effect-7~.focus-border i:after < content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.6s; >.effect-7~.focus-border i:after < left: auto; right: 0; >.effect-7:focus~.focus-border:before, .effect-7:focus~.focus-border:after < left: 0; width: 100%; transition: 0.4s; >.effect-7:focus~.focus-border i:before, .effect-7:focus~.focus-border i:after

The effect-8 class draws the border starting from the corners of the input element. The CSS snippet for this border animation is given below:

.effect-8~.focus-border:before, .effect-8~.focus-border:after < content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.3s; >.effect-8~.focus-border:after < top: auto; bottom: 0; left: auto; right: 0; >.effect-8~.focus-border i:before, .effect-8~.focus-border i:after < content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.4s; >.effect-8~.focus-border i:after < left: auto; right: 0; top: auto; bottom: 0; >.effect-8:focus~.focus-border:before, .effect-8:focus~.focus-border:after < width: 100%; transition: 0.3s; >.effect-8:focus~.focus-border i:before, .effect-8:focus~.focus-border i:after

The last border animation draws the border around the input and ending with the starting point. Like all the above effects, you can customize it by defining the custom values for the border, transition, and background-color property.

.effect-9~.focus-border:before, .effect-9~.focus-border:after < content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.2s; transition-delay: 0.2s; >.effect-9~.focus-border:after < top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s; >.effect-9~.focus-border i:before, .effect-9~.focus-border i:after < content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.2s; >.effect-9~.focus-border i:after < left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s; >.effect-9:focus~.focus-border:before, .effect-9:focus~.focus-border:after < width: 100%; transition: 0.2s; transition-delay: 0.6s; >.effect-9:focus~.focus-border:after < transition-delay: 0.2s; >.effect-9:focus~.focus-border i:before, .effect-9:focus~.focus-border i:after < height: 100%; transition: 0.2s; >.effect-9:focus~.focus-border i:after

That’s all! I hope you found one of the best CSS input border animation from these effects for your input. If you have any questions or suggestions, let me know by comment below.

Источник