We Keep Coding

How to create Timer Progress bar as shown below in GIF?

I want to create animated progress as below, but the thing is it is not working properly on safari browser
The css property which I used is:
.prgoressBar {
width: 100%;
margin: 0 auto;
height: 22px;
background-color:#BBBBBB;
overflow: hidden;
}
.prgoressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #185A8D;
box-sizing: border-box;
color:#fff;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
transition: width 1s linear;
}
<div id="QM_progressBar" class="prgoressBar">
</div>

Try using the 'transform: scaleX()' instead of changing the width. Transform uses to run better with transition, maybe that's why Safari is freaking out.
I don't have Safari installed right now, so please check if this codepen works: https://codepen.io/thiagoberrutti/pen/GRmLzZK.
In the codepen I used transition but in this snippet I tried with animations instead, see if one of them can work on Safari:
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear forwards;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
<div class="progress-container">
<div class="progress" style="--time:5s"></div>
</div>

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.

Why is my image not rotating after mouse click? (javascript + css)

I am trying to get the image to rotate after a button click, but I cannot get the image to rotate. After putting the animation lines of css into an image:active id block in css, I was able to get the image to rotate on an active mouse click, but that is not what my assignment calls for.
HTML
<a id="button" onclick="rotate()">Go</a>
<img class="click" id="image" src="http://placehold.it/500x500">
<script type="text/javascript" src="script.js"></script>
</body>
Javascript
function rotate(){
image.className = 'click';
}
CSS
#button {
font-family: "Verdana";
font-weight: inherit;
font-size: 3vmin;
line-height: 14vmin;
text-align: center;
display: block;
border: none;
background: white;
width: 15vmin;
height: 15vmin;
margin: 2vmin auto;
border-radius: 10vmin;
cursor: pointer;
color: black;
}
.click:active {
display: block;
background: transparent;
border: 0px solid transparent;
height: 50vh;
width: 50vh;
margin: 5vh auto 0;
transition: height 100ms, border-width 100ms, border-color 100ms;
animation: rotate;
animation-delay: 100ms;
animation-timing-function: reverse; animation-iteration-count: normal;
animation-duration: 1s;
animation-play-state: running;
animation-direction: reverse;
}

Have a look at this. It seems you haven't set the degrees.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function rotate(){
myImg=document.getElementById('image');
myImg.className = 'rotate';
}
</script>
<style>
.rotate {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<a id="button" onclick="rotate()">Go</a>
<img class="click" id="image" src="http://placehold.it/500x500">
</body>
</html>

active is uninitialized when you use it, assuming that's the entirety of your Javascript. You'll want to use document.getElementById('active') instead.
Your function sets the class of the element to 'click', which doesn't make much sense since the class of the img tag is initially set to 'click'. Nothing changes when your function is called.
The CSS selector should just be .click instead of .click:active, and the img tag shouldn't start with a class.

how to prevent horizontal scroll on css zoom animation

I want to use a landscape image, that zooms in to the landmark in the center and stays there.
I have one main issue with the current code I have..
That is the horizontal bar that turns up on zoom.
I want the image to have 100% width but the height to be about 80%
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/animate.css">
<link type="text/css" rel="stylesheet" href="css/home1.css">
</head>
<body>
<div id="wrapper">
<a href="#">
<img src="images/zoom.jpg" alt="">
</a>
</div><!--wrapper-->
</body>
</html>
CSS :
a {
overflow:hidden;
width:100%;
}
a img {
text-decoration: none;
display: block;
width: 100%;
float: left;
margin: 0 3px 3px 0;
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
a img:hover {
opacity: .7;
-webkit-transform: scale(2.05,2.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(2.05,2.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}
I am also wondering if there is a way I can make it stay on zoomed in state once the hover is done, so that another element can appear at that point but the zoom is closer.
http://jsfiddle.net/itsnamitashetty/U4HTu/

Add display:block; to a css. It'll solve your issue.
Demo: http://jsfiddle.net/lotusgodkk/U4HTu/1/
a {
overflow:hidden;
width:100%;
display:block;
}

Start CSS-Transition with JavaScript

I read 5 tutorials about how to start a CSS-Transition with JavaScript, but it doesn't work.
I'm using Safari.
Here's my Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: aqua;
transition: width 3s linear;
}
</style>
<script type="text/javascript">
function test(){
document.getElementById('test').style.width = 200+'px';
}
</script>
</head>
<body>
<div id="test">
</div>
<button onclick="test()">Los</button>
</body>
</html>

You may need to use vendor prefixes, safari uses webkit so try addind the -webkit- prefix.
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: aqua;
-webkit-transition: width 3s linear;
-moz-transition: width 3s linear;
transition: width 3s linear;
}
</style>
DEMO