We Keep Coding

Hide animated element after x seconds

I have a class over thumbnails called toolbar and I move it to the top on mouse over.
li .toolbar {
position:absolute;
top:10px;
right:0;
left:0;
overflow:hidden;
height:24px;
padding:0 10px;
color: #fff;
-webkit-transition:top .3s;
-moz-transition:top .3s;
-o-transition:top .3s;
transition:top .3s;
}
li:hover .toolbar{
top:-20px;
}
So when I move it 20 pixels to the top I also want to hide it without using z-index.
Is there any way with jQuery or pure CSS to do this?
Thank you

You can use opacity to hide the toolbar and set transition delay to make it start after a specific time
see code snippet
.li {
position: relative;
border: 1px solid #000;
height: 100px;
}
.li .toolbar {
position: absolute;
top: 10px;
right: 0;
left: 0;
overflow: hidden;
height: 24px;
width: 24px;
padding: 0 10px;
color: #fff;
background: red;
transition: top .3s .3s, opacity .3s;
}
.li:hover .toolbar {
transition: top .3s, opacity .3s .3s;
top: -20px;
opacity: 0;
}
}
<div class="li">
<div class="toolbar"></div>
</div>

You can use jQuery animation chaining.
$('.toolbar').animate({top:-20},1000).animate({'z-index': 0},1000).animate({opacity:0});
So to clarify: Each animation is happening after the last animation finishes.
Example on jsfiddle. You can see how z-index animation is working after the top animation and before opacity animation.

Adjusting toggle switch in smooth transuction and color change

I'm trying to make the toggle button move in smooth transition just like IOS switch toggle.
And also I'm trying to change the border color of the #bounds to green when the toggle is on.
#bounds {
padding:2px;
transition: all .2s ease;
border: 4px solid #ececec;
border-radius: 2em;
overflow:auto;
float:left;
color: transparent;
}
#bounds label {
float:left;
width:2.0em;
}
#bounds label span {
text-align:center;
padding:3px 0px;
display:block;
}
#bounds label input {
position:absolute;
top:-20px;
}
#bounds input:checked + span {
background-color:#404040;
color: transparent;
}
#bounds label.on input:checked + span {
background: #7FC6A6;
color: transparent;
border-radius: 1em;
}
#bounds label.off input:checked + span {
background: #ececec;
color: transparent;
border-radius: 1em;
}
<div id="bounds">
<label class="on"><input type="radio" name="toggle"><span>On</span></label>
<label class="off"><input type="radio" name="toggle" checked><span>Off</span></label>
</div>

I've figured out part of it. You're using two separate items for the transition. Instead, use one. Put them under the same label. Also, add transitions to the span that's sliding. Make the buttons opacity 0 and make them take up the entire size of the label. When a button is checked, you set it to display : none. The other one will take it's place. Also, since they take up the entire size of the container, it doesn't matter where you click.
UPDATE
Fixed it :D
#bounds {
padding:2px;
transition: all .2s ease;
border: 4px solid #ececec;
border-radius: 2em;
overflow:auto;
float:left;
color: transparent;
}
#bounds label {
float:left;
width: 4.0em;
height: 2.0em;
}
#bounds label span {
text-align:center;
display:block;
background : #7FC6A6;
width: 2.25em;
height:2em;
border-radius : 20px;
transition : 350ms all;
}
#bounds label input {
position:absolute;
width: 4.0em;
height: 2.0em;
opacity: 0;
}
#bounds label input.off:checked + span {
background-color:#404040;
color: transparent;
margin-left : 1.75em;
}
#bounds label input.off:checked
{
display : none;
}
#bounds label input.on:checked + span {
background: #7FC6A6;
color: transparent;
border-radius: 1em;
float: left;
margin-left : 0;
}
#bounds label input.on:checked
{
display : none;
}
<div id="bounds">
<label>
<input class="on" type="radio" name="toggle" >
<input class="off" type="radio" name="toggle" checked>
<span></span>
</label>
</div>

Using JavsScript to toggle one label instead of two. Also, removed floating part and made transition:
HTML:
<div id="bounds">
<label class="off"><input type="radio" name="toggle" checked> <span>Off</span></label>
</div>
JavaScript:
$("#bounds").on("click", function(){
if ($(this).find('label').hasClass('off')) {
$(this).find('label').removeClass('off');
$(this).find('label').addClass('on');
$(this).addClass('active');
} else {
$(this).find('label').removeClass('on');
$(this).find('label').addClass('off');
$(this).removeClass('active');
}
return false;
});
CSS:
#bounds {
padding:2px;
border: 4px solid #ececec;
border-radius: 2em;
overflow:auto;
float:left;
color: transparent;
width:4em;
height: 24px;
}
#bounds.active {
border-color: #7FC6A6;
transition: all 1s ease-in-out;
}
#bounds label, #bounds span {
width:2.0em;
}
#bounds label.off span {
transform: translateX(100%);
transition: all 1s ease-in-out;
}
#bounds label.on span {
transform: translateX(0%);
transition: all 1s ease-in-out;
}
#bounds label span {
text-align:center;
padding:3px 0px;
display:block;
}
#bounds label input {
position:absolute;
top:-20px;
}
#bounds input:checked + span {
background-color:#404040;
color: transparent;
}
#bounds label.on input:checked + span {
background: #7FC6A6;
color: transparent;
border-radius: 1em;
}
#bounds label.off input:checked + span {
background: #ececec;
color: transparent;
border-radius: 1em;
}
Fiddle

Added a bounce effect, see if you like it
#bounds {
padding: 2px;
transition: all .2s ease;
border: 4px solid #ececec;
border-radius: 2em;
overflow: auto;
float: left;
color: transparent;
height: 25px;
}
#bounds label {
float: left;
width: 2.0em;
}
#bounds label span {
text-align: center;
padding: 3px 0px;
display: block;
height: 19px;
}
#bounds label input {
position: absolute;
top: -20px;
}
#bounds input:checked+span {
background-color: #404040;
color: transparent;
}
#bounds label.on input:checked+span {
background: #7FC6A6;
color: transparent;
border-radius: 1em;
-webkit-animation: toggleOn 0.1s; /* Safari 4.0 - 8.0 */
animation: toggleOn 0.1s;
}
#bounds label.off input:checked+span {
background: #ececec;
color: transparent;
border-radius: 1em;
}
#-webkit-keyframes toggleOn {
0% {
transform: translate3d(0px, 0, 1);
}
30% {
transform: translate3d(-10px, 0px, 1);
background-color: #404055;
}
60% {
transform: translate3d(-5px, 0px, 1px);
}
}
#keyframes toggleOn {
0% {
transform: translate3d(0px, 0, 1);
}
30% {
transform: translate3d(-10px, 0px, 1);
background-color: #404055;
}
60% {
transform: translate3d(-5px, 0px, 1px);
}
}
<div id="bounds">
<label class="off"><input type="radio" name="toggle" checked><span></span></label>
<label class="on"><input type="radio" name="toggle"><span></span></label>
</div>

How to do reverse animation in CSS?

So for the following code, I have a circular notification that animates, opening up left and displaying information and a profile image. I would like to be able to reverse the animation back by having the circle go forward covering up the info and fading out (which I already have inputed). However, I'm not sure how to implement this. I've tried a couple of ways like switching the animation around but it doesn't seem to work. Any suggestions?
You can click the "CLOSE ME" button to close the notification and the "OPEN ME" to open it as well.
$(document).ready(function() {
$(".open").click(function(e) {
$(".pgn-wrapper").fadeIn(250);
});
$(".close").click(function(e) {
$(".pgn-wrapper").fadeOut(500);
});
});
/* Circle Animation
------------------------------------
*/
.pgn-circle .alert {
border-radius: 300px;
animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
-webkit-animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
height: 50px;
overflow: hidden;
padding: 6px 55px 6px 6px;
-webkit-transform: translateZ(0);
position: relative;
}
.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
float: right;
}
.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
float: left;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div {
border-radius: 50%;
overflow: hidden;
width: 48px;
height: 48px;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
width: 100%;
height: 100%;
}
.pgn-circle .alert > div > div.pgn-message > div {
opacity: 0;
height: 47px;
padding-left: 9px;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
.pgn-circle .alert > div > div.pgn-message > div p:only-child {
padding: 12px 0;
}
.pgn-circle .alert .close {
margin-top: -12px;
position: absolute;
right: 18px;
top: 50%;
opacity: 0;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
}
.pgn-circle .alert p {
margin-bottom: 0;
}
.pgn-circle .alert > div {
display: table;
height: 100%;
}
.pgn-circle .alert > div > div {
display: table-cell;
vertical-align: middle;
}
#keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#-webkit-keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.close:target {
animation: resizeCircle2 1s all;
animation-direction: alternate;
}
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
/* Headings
------------------------------------
*/
p {
display: block;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
line-height: 22px;
margin: 0px 0px 10px 0px;
font-style: normal;
white-space: normal;
}
.bold {
font-weight: bold !important;
}
/* Alert
------------------------------------
*/
.alert {
background-image: none;
box-shadow: none;
text-shadow: none;
padding: 9px 19px 9px 15px;
border-radius: 3px;
font-size: 13px;
border-width: 0;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.alert-danger, .alert-error {
background-color: #c42827;
color: white;
border-color: #933432;
}
.alert-danger .close, .alert-error .close {
background-position: -95px -10px !important;
}
/*------------------------------------------------------------------
Notifications
--------------------------------------------------
*/
.pgn-wrapper[data-position='top'] {
top: 0;
left: 0;
right: 0;
}
.pgn {
position: relative;
margin: 10px;
}
.pgn .alert {
margin: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="pgn-wrapper" data-position="top-right">
<div class="pgn push-on-sidebar-open pgn-circle">
<div class="alert alert-danger">
<div>
<div class="pgn-thumbnail">
<div>
<img width="40" height="40" style="display: inline-block;" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="pgn-message">
<div>
<p class="bold" style="color:white">John Doe</p>
<p>Logging out in <b>60</b> second(s).</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="open" href="#">OPEN ME</a>
<a class="close" href="#">CLOSE ME</a>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Well, you've got a ton of code and I didn't parse through all of it, but I can say that when you have an animation like this:
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
You are indicating where the width should start and end so to reverse that, you'd want to either ensure that this animation is tied to a temporary state, like a hover with a selector like this:
element:hover {
animation:resizeCircle 1s all;
}
Then, the animation would only apply when the element is being hovered and when it isn't the element will animate back to its original state.
Or, you could set up a separate animation that specifies the reverse property values:
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
and apply that to a "trigger" selector, such as:
element:target {
animation:resizeCircle2 1s all;
}
Which would (in this case) apply the reverse animation when the element is the target of a click.

Here's an example:
<div class="expandable"></div>
div.expandable {
background-color: green;
width: 30px;
height: 25px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
div.expandable:hover {
width: 300px;
}
You can give that a run here: https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview

Trying to have one div slide down from behind another div on hover

I'm trying to have a div with some text that slides down another div with more text when hovered over. I'm currently having difficulty achieving this. If a good solution includes JQuery, could you guys ELI5 (I've never used JQuery before)? The current attempt laid out below has the basis of what I'm looking for. I just want there to be an animation on hover showing the additional text sliding down, instead of it suddenly appearing.
.container {
font-size: 2em;
box-shadow: 0px 0px 3px 1px black;
margin: 20px;
padding: 20px;
background-color: #E7E7EF;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
width: 80%;
margin-top: 50px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.below {
display: none;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.container:hover .below {
display: block;
}
<div class="container">
<div class="above">
<p>
Some text in the above div
</p>
</div>
<div class="below">
<p>
More text that slides down from under the above div
</p>
</div>
</div>

Use overflow instead of display
https://jsfiddle.net/yb6vct8a/1/
.container {
font-size: 2em;
box-shadow: 0px 0px 3px 1px black;
margin: 20px;
padding: 20px;
background-color: #E7E7EF;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
width: 80%;
margin-top: 50px;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.below {
max-height: 0;
overflow: hidden;
/* Set our transitions up. */
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.container:hover .below {
max-height: 200px;
}

How to get Mouse Out effect in CSS

I have created a transition effect on a div. I have written the following code and its working fine, when I hover on the div, the color smoothly changes, but when I remove the mouse the color backs to its original state abruptly.
I want to know the method of changing the color slowly on Mouse out Event as well.
Kindly check my code and guide me.
<nav>
<ul>
<li id="skills" class="navText" >Work -Experience</li>
<li id="web" class="navText">Skills </li>
</ul>
</nav>
CSS
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}

It is changing back suddenly because you have the transitions in the :hover rule. The transitions only works when the mouse is over the element.
Do it like this instead:
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}
See? The transitions are applied only when the mouse is over the element because it is in the :hover rule. Thus, it cannot fade back out after the mouse leaves because the transitions are no longer applied. If the transitions are applied to the elements style, it will fade in and out every time the mouse moves over it.
Here is a JSFiddle to show what I mean.
Hope this helps!

It should work if you only have transition on the non-hovered element, according to CSS-tricks
av ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}