Develop Reference

Hide the background of a div in ease-out animation

I have been trying to make an info button which displays time when clicked in ease animation, now I want to hide this button after 5 sec. Of being clicked. I have tried and tried but nothing happens😔. A solution please!!!
.info:hover {
background-color: white;
padding: 0 0 0 5.1px;
width: 315px;
text-align: left !important;
animation: hideAnimation 0s ease-out 5s;
animation-fill-mode: forwards;
}
#keyframes hideAnimation {
to {
visibility: hidden;
width: 0;
height: 0;
background-color: transparent;
}
}
<div class="info">
<i class="fa fa-info-circle"></i>
<span class="extra-info" id="times"></span>
</div>;
I tried many things as many as possible but neither trials succeeded

How do you animate multi text in, stay for a few seconds and animate out using CSS

*** Update ****
Manage to get all 3 line of text to move out together but trying to resolve the issue of after moving out the text will appear again. Updated the codes below.
*** Update 2 ****
Ok, I managed to solve the issue (I think). I just need to add animation-fill-mode: forwards; for the main div and added animation-fill-mode: backwards for all the inner content. But I'm open if any expert have a better solutions.
I've been trying to learn animation and I want to this type of animation, preferably with just using CSS but if that is not possible I don't mind CSS and JS.
What I want to do is this:, I have 3 line of text
XXXXXXXXXX
xxxxxxxxx
xxxxxxxxx
When the page load, the first line will appear follow by the second and the third. Than they will stay for say 5 seconds before all 3 move out and fade off.
So far I've managed to do this: View in Codepen
.heading-primary {
color: #000;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
animation: moveOutRight 2s ease-out 10s;
animation-fill-mode: forwards;
}
.heading-primary--main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: moveInLeft;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}
.heading-primary--sub {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.75rem;
font-weight: 700;
animation: moveInLeft 2s ease-out 1s;
animation-fill-mode: backwards;
}
.heading-primary--sub1 {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.75rem;
font-weight: 700;
animation: moveInLeft 2s ease-out 2s;
animation-fill-mode: backwards;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes moveOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(10rem);
}
}
<div class="header__text-box">
<h1 class="heading-primary"><span class="heading-primary--main">Outdoors </span><span class="heading-primary--sub">is where life happens</span>
<span class="heading-primary--sub1">is where life happens</span>
</h1></div>
But how do I make the 3 text move out together rather than one at a time. ie I want them to come in one at a time which is working but can't find a way to make them move out together. I think it has something to do with the delay timing which I've set which affect the moving out too.

Css animation to put a color layer over a background image while hovered

I am trying to achieve the effect shown here:
https://css-tricks.com/almanac/properties/t/transition/
Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element.
An example of which can be found here:
http://thefoxwp.com/portfolio-packery-4-columns/
I can get the transition part working with:
.box {
width: 150px;
height: 150px;
background: blue;
<!--background-image: url("http://lorempixel.com/380/222/nature");-->
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
}
<div class="box"></div>
But I am having trouble achieving it with a background image and making the white animation transparent over top of it.

The better way to do it would be to use an overlay over the image and apply transition on its opacity.
See this FIDDLE
Use a wrapper div for both .box and .overlay. Since we want overlay to placed exactly top of the box, we absolute positioned overlay on the top of box.
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
You Css
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.overlay:hover {
opacity: 0.7;
}

You can add background-image:none on .box:hover. It will remove the background-image and you can get the background-color work. As soon as, you move out of the div.box, image will appear again.
.box {
width: 150px;
height: 150px;
background-image: url("http://lorempixel.com/380/222/nature");
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
background-image:none;
}
<div class="box"></div>

the problem is that background and background-image cannot both exist at the same time. try using nested div tags: one with the background color nested inside the background-image.

Animated header dissappers while scrolling upwards

I created an animated header div menu that slides down on page load. I used animation-delay to delay the animation for 1 second. When the user scrolls down the header div changes colors fine but when scrolling back up the header disappears for a split second. Please help.
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("sticky");
$('a').css({
color: '#fff'
});
}
else{
$('header').removeClass("sticky");
$('a').css({
color: '#151515'
});
}
});
body{
margin:0px;
}
#content{
height:500px;
width:500px;
display:block;
background-color:pink;
margin: 0 auto;
margin-top:50px;
}
header{
position: fixed;
top: -300px;
width: 100%;
height:50px;
padding-top:25px;
text-align: center;
background: red;
z-index: 1;
font-size: .8em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
animation:theheader 1s;
-moz-animation:top theheader 1s; /* Firefox */
-webkit-animation:theheader 1s; /* Safari and Chrome */
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
header.sticky {
height:50px;
padding-top:25px;
background-color: blue;
color: #FFF;
}
#-moz-keyframes theheader
{
from {
top: -300px;
}
to {
top:0px;
}
}
<header>
MENU
</header>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
</div>
https://jsfiddle.net/qectrqg3/35/

If you're simply animating the top value, I would recommend using transition instead of animations. Transitions will ensure you don't get a flicker when changing "animation" values in the middle of a transition.

How to make textbox border color fade in on focus using JavaScript or jQuery

How can I make the color of the textbox border fade into another color when it is focused? For example if the border color was #ddd then the user focused on the textbox it would fade into #0266C8 and when they unfocus it fades into #ddd again. Here is my code:
<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
var x = y.value;
if(x.length>5) {
document.getElementById("error").innerHTML="Limit is 5 characters";
} else {
if(x.length<6) {
document.getElementById("error").innerHTML="";
}
}
}
</script>
<style type="text/css">
body {
margin:auto;
font-family:arial, sans-serif;
padding-top:100px;
}
.container {
width:920px;
margin:auto;
text-align:center;
}
.main_text {
font-family:"Bebas Neue";
font-size:76px;
color:green;
margin-bottom:10px;
}
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
}
.textbox1:focus {
border: 4px solid #0266C8;
}
#error {
font-size:24px;
color:red;
font-family:"Bebas Neue";
}
</style>
</head>
<body>
<div class="container">
<span class="main_text">Password Strength Checker</span><br>
<input name="textbox1" onkeyup="passwordCheck(this);" onKeyPress="passwordCheck(this);" onChange="passwordCheck(this);" onKeyDown="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" style="margin-top:10px;" autofocus><br><br>
<div id="error"></div>
</div>
</body>
</html>
Any help will be greatly appreciated. Thanks, Omar.

Use CSS3 transitions.
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
transition: background .5s ease-out; // global
-moz-transition: all .5s ease-out; // for mozilla
-o-transition: all .5s ease-out; // for opera
-webkit-transition: all .5s ease-out; //for webkit, chrome or safari
}
.textbox1:focus {
border: 4px solid #0266C8;
transition: background .5s ease-in; // global
-moz-transition: all .5s ease-in; // for mozilla
-o-transition: all .5s ease-in; // for opera
-webkit-transition: all .5s ease-in; //for webkit, chrome or safari
}
You can set the fade delay on .5s ease-in

You can try to use CSS transition here:
transition: border-color 1s linear;
-moz-transition: border-color 1s linear;
-o-transition: border-color 1s linear;
-webkit-transition: border-color 1s linear;
Fiddle Demo

you can use:
.container input{
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.container input:focus {
border: 1px solid #4F94CD;
}