So I got a little circle shape with an icon that when I click, it will make the icon disappear and show a few elements in another div. The circle shape transforms into a 260x260 px square with CSS animation.
Until that I was fine, but I can't make the fadeIn/fadeOut work. Is there a way to handle this by toggling a CSS class over the parent element?
I can't just use opacity 0 to opacity 1 because I need the icon to really disappear with display none. Same for the other when going back to circle+icon state. But I just can't even make the opacity animation work. I also tried with those keyframes of fadeIn and fadeOut but didn't work either.
I found this fiddle but it looks so ugly having to use a setTimeout.
Is there a way to solve this with only CSS?
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
display: none;
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: block;
}
#keyframes opacity-down {
0% {
visibility: visible;
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes opacity-up {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
/*
#-webkit-keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#-webkit-keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}
#keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png"/>
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>
Until that I was fine, but I can't make the fadeIn/fadeOut work. Is
there a way to handle this by toggling a CSS class over the parent
element?
You can do this without animation with toggle classes
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
$('.children-2').toggleClass('show1');
$('.children-1').toggleClass('show2');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
opacity: 0;
transition: opacity 1s;
}
.children-1 {
opacity: 1;
transition: opacity 1s;
}
.show1 {
opacity: 1;
}
.show2 {
opacity: 1;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>
Related
I recently got into coding and I'm enjoying it pretty much. With that being said, I'm pretty new to it and very... rookie. I was wondering if there's a way I can make my centered Icon fade out instead of just disappearing on click. The same goes for the overlay that I've created.
function functionHide(divId, divId2, ) {
let x = document.getElementById(divId);
let y = document.getElementById(divId2);
x.style.display = "none";
y.style.display = "block";
}
#icon {
content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
height: 256px;
width: 256px;
top: 50%;
left: 50%;
position: fixed;
margin-top: -128px;
margin-left: -128px;
z-index: 1;
transition: .4s ease;
display: block;
}
#overlay {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
}
#icon:hover {
cursor: pointer;
transform: scale(1.5);
transition: transform .4s;
}
<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
<div id="overlay"></div>
</div>
There is a good fade in example.
Use an animation in the hide class, for example:
.hide {
animation-name: fadeOut;
animation-duration: 3s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Remember to use browser extensions like -webkit or -moz.
Use a #keyframes animation or change the opacity of the image, granted that the transition was set.
#keyframes
function functionHide(divId, divId2, ) {
let x = document.getElementById(divId);
let y = document.getElementById(divId2);
x.style.animation = "fadeOut 0.2s forwards";
y.style.animation = "fadeOut 0.2s forwards";
}
#icon {
content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
height: 256px;
width: 256px;
top: 50%;
left: 50%;
position: fixed;
margin-top: -128px;
margin-left: -128px;
z-index: 1;
transition: .4s ease;
display: block;
}
#overlay {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
}
#icon:hover {
cursor: pointer;
transform: scale(1.5);
transition: transform .4s;
}
#keyframes fadeOut{
from{
opacity:1;
}
to{
opacity:0;
}
}
<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
<div id="overlay"></div>
</div>
Explanation
fadeOut 0.2s forwards
^ ^ ^
name of animation
duration of animation
instructs the animation to run once, then stay in the same state after animation
Or you can consider using the jQuery fadeOut() function like so:
function functionHide(divId, divId2, ) {
let x = document.getElementById(divId);
let y = document.getElementById(divId2);
$(x).fadeOut();
$(y).fadeOut();
}
#icon {
content: url('https://i.picsum.photos/id/178/536/354.jpg?hmac=ehK1NKjWRA3SRY3R4dCo7ejDyrzqqjDWwtwo2TYLpHk');
height: 256px;
width: 256px;
top: 50%;
left: 50%;
position: fixed;
margin-top: -128px;
margin-left: -128px;
z-index: 1;
transition: .4s ease;
display: block;
}
#overlay {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
}
#icon:hover {
cursor: pointer;
transform: scale(1.5);
transition: transform .4s;
}
#keyframes fadeOut{
from{
opacity:1;
}
to{
opacity:0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="icon" onclick="functionHide('icon', 'overlay')"></div>
<div id="background">
<div id="overlay"></div>
</div>
Coding for preloader icon is using HTML, CSS, and Javascript, but it's not hidden when I disabled the javascript from the browser console, because google will disable the javascript and CSS when it crawls to indexing the page. is there any other solution to use the preloader without javascript and CSS? Please help me.
my Html:
<div id="loader-wrapper">
<div id="loader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: #fff;
overflow: hidden;
}
#loader {
width: 90px;
height: 65px;
position: relative;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
#loader ul {
margin: 0;
list-style: none;
width: 90px;
width: 90px;
position: relative;
padding: 0;
height: 10px;
}
#loader ul li {
position: absolute;
width: 2px;
height: 0;
background-color: #f1582a;
bottom: 0;
}
#keyframes sequence1 {
0% {
height: 10px;
}
50% {
height: 50px;
}
100% {
height: 10px;
}
}
#keyframes sequence2 {
0% {
height: 20px;
}
50% {
height: 65px;
}
100% {
height: 20px;
}
}
#loader li:nth-child(1) {
left: 0;
animation: sequence1 1s ease infinite 0;
}
#loader li:nth-child(2) {
left: 15px;
animation: sequence2 1s ease infinite 0.1s;
}
#loader li:nth-child(3) {
left: 30px;
animation: sequence1 1s ease-in-out infinite 0.2s;
}
#loader li:nth-child(4) {
left: 45px;
animation: sequence2 1s ease-in infinite 0.3s;
}
#loader li:nth-child(5) {
left: 60px;
animation: sequence1 1s ease-in-out infinite 0.4s;
}
#loader li:nth-child(6) {
left: 75px;
animation: sequence2 1s ease infinite 0.5s;
}
JS:
function prealoader () {
if ($('#loader').length) {
$('#loader').fadeOut(); // will first fade out the loading animation
$('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
};
}
You could use an animated SVG icon that animates.
I am attempting to get my span elements agencyText to appear one at a time. Then at the end of the interval for the curr and next classes to be applied to properly position the current and next bit of text to appear.
As of now, I am getting them all shown at once. I created them with data attribute index values. However, I am unsure how to loop through them to get this to work correctly.
If you click this link there is an example of the left side of exactly what I am trying to do. It is the text rotated 90 degrees. Every four seconds the wording is updated.
Does anyone know how I can modify my code to replicate this?
UPDATE - showing DOM code of example.
var arr = $('.textContainer');
var arrLen = arr.length;
var i = 0;
var attr = $('agencyText').data('index');
var loop = function() {
var item = arr.eq(i);
var description = item.find('.agencyText');
description.addClass('curr');
i = (i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #000;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
}
.digitalAgency, .agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
#-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
#keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">The first one</span>
<span data-index="1" class="agencyText">The second one</span>
<span data-index="2" class="agencyText">The third one</span>
<span data-index="3" class="agencyText">The fourth one</span>
</span>
</div>
I have updated your javascript code. try like this
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var loop = function() {
$('.textContainer > span').removeClass('curr');
$('span[data-index = '+i+']').addClass('curr');
i = (i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #000;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
}
.digitalAgency, .agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
#-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
#keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">The first one</span>
<span data-index="1" class="agencyText">The second one</span>
<span data-index="2" class="agencyText">The third one</span>
<span data-index="3" class="agencyText">The fourth one</span>
</span>
</div>
The goal is to have the text transition to 3 different words. I want them to be in sync with the animated rings(text change after every two rings animate fading in and fading out) I'm not sure what is the best way to set the timing for the rings and the text - should this be done with javascript or CSS animation keyframes? Below is a link to my codepen and HTML/CSS.
Codepen - https://codepen.io/pizzapgh/pen/RygPQJ
body {
background-color: gray;
}
#circles {
width: 1000px;
height: 1000px;
display: inline-block;
position: relative;
margin: auto;
border: 1px solid blue;
}
#circles div {
position: absolute;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
width: 0;
height: 0;
opacity: 0;
animation-name: growCircles;
animation-duration: 8s;
transition-timing-function: ease-out;
animation-iteration-count: infinite;
}
#circles div:nth-child(1) {
animation-delay: 0s;
}
#circles div:nth-child(2) {
animation-delay: 1s;
}
#circles div:nth-child(3) {
animation-delay: 2s;
}
#circles div:nth-child(4) {
animation-delay: 3s;
}
#circles div:nth-child(5) {
animation-delay: 4s;
}
#circles div:nth-child(6) {
animation-delay: 5s;
}
#keyframes growCircles {
0% {
top: 500px;
left: 500px;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
}
100% {
opacity: 0;
}
}
/*================================
Text Transition
================================== */
#spin:after {
content: "";
animation: spin 5s ease-in infinite;
}
#keyframes spin {
0% {
content: "From The Classroom";
}
60% {
content: "To the City";
}
100% {
content: "To the World";
}
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
color: white;
width: 500px;
overflow: hidden;
text-align: center;
font-family: 'RockwellMT' !important;
}
<div class="circle-container">
<div id="circles">
<h2 id="spin"></h2>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
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