I am trying to hide a progress bar after a certain amount of seconds and show a div.
I have coded this jsFiddle but does not seem to be working.
jsFiddle
you can do this easly in css
.blue{
width: 200px;
background-color: blue;
height:30px;
left:40px;
top:30px;
padding:5px;
}
.blue>div{
background-color:red;
height:25px;
width:50px;
top:10px;
}
<div class="blue" ><div>20%</div></div>
You need browser prefixes:
#keyframes bubbly
{...}
#-moz-keyframes bubbly /* Firefox */
{...}
#-webkit-keyframes bubbly /* Safari and Chrome */
{...}mymove
#-o-keyframes bubbly /* Opera */
{...}
So it works in almost all browsers.
Related
I have a div and I want that on click an other div slides in. I want to achieve this with css3 :target.
Like you can see in the code snippet the :hover works. When hovered an animation start to fade some info in. When you click on the image I want that an other div fades in on the top by calling the same animations as used on hover.
Can somebody help with getting the :target working?
body{
margin: 0px;
}
.image{
position: relative;
width:300px;
height:auto;
}
.image img{
width:100%;
}
.download{
position: absolute;
top:0px;
left:0px;
height:80%;
width:100%;
background-color: gray;
display:none;
}
.info{
position: absolute;
bottom:0px;
left:0px;
height:20%;
width:100%;
background-color: green;
opacity: 0;
}
.info p{
padding: 5px;
margin: 0px;
}
.image:hover .info{
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera */
animation: show 0.5s;
opacity: 1;
}
.image:target .download{
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera */
animation: show 0.5s;
opacity: 1;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
/* Standard syntax */
#keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
<div class="image"><!-- I detect everything on this div-->
<img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg">
<div class="download"><!-- this div should fade in on click (:target)-->
download
</div>
<div class="info"> <!-- this div should fade in on hover-->
<p>Image 1</p>
</div>
</div>
This can be achieved via jquery: http://jsfiddle.net/swm53ran/13/
$('.image').on('click', function(){
$(this).find('.download').fadeIn(500);
});
i know you want to achieve this with :target, but you can do both animations through jquery to keep consistent if you would like. just another option...
i think i got it the way you wanted with css:
added anchor tag surrounding image, added id #dl to download div...heres the fiddle http://jsfiddle.net/swm53ran/14/
:target {
display:block;
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera*/
animation: show 0.5s;
opacity: 1;
}
<div class="image"><!-- I detect everything on this div-->
<a href="#dl">
<img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg"/>
<div class="download" id="dl"><!-- this div should fade in on click (:target)-->
download
</div>
<div class="info"> <!-- this div should fade in on hover-->
<p>Image 1</p>
</div>
</a>
</div>
I want to change, when I click on image, the hover image position. Now* the image hover enlarge on bottom, and I want with enlargement on top (see the image link).
I have added this code :
HTML:
<div class="image"></div>
CSS:
.image { background:url(image url); height:50px; width:50px; }
.image:hover { background:url( image url ); height:400px; width:400px; }
Image:
try this
.image:hover {
cursor: pointer;
height:400px;
width: 400px;
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
}
it works ..
I want the block to go from one point to another.
In the Fiddle you can see that after the animation, the block goes back to it's first position.
How can I prevent that?
http://jsfiddle.net/2nT2S/
the css
div
{
width:100px;
height:100px;
background:black;
position:relative;
animation:myfirst 2s;
-webkit-animation:myfirst 2s; /* Safari and Chrome */
}
#keyframes myfirst
{
from { left:0px; top:0px; }
to { left:0px; top:200px; }
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from { left:0px; top:0px; }
to { left:0px; top:200px; }
}
</style>
Simply add the forwards animation-fill-mode to the animation:
animation:myfirst 2s forwards;
-webkit-animation:myfirst 2s forwards; /* Safari and Chrome */
jsfiddle
I'm new to animations, but I think it can be achieved by adding top:200px; to the div
here's an example: http://jsfiddle.net/fatgamer85/2nT2S/2/
I'm trying to just do a simple animation where I change a box's color. However, the box never appears, and obviously no animation happens. I have:
<!DOCTYPE HTML>
<html>
<head>
<style>
<div>
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
</div>
#keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
#-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
#-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
....
</body>
</html>
Why does nothing happen? I'm not really a web developer, but thought I would give this as shot. I seem to have followed all instructions properly, but perhaps I missed something.
As a note, everything here is done locally, this is just in a .html file on my desktop. But it seems like it should still work. Any help appreciated. Thanks.
I think you're just having a bad day, but you have
<style>
<div>
VARIOUS CSS RULES
You should write it as
<style>
div {
/* snip */
<body>
<div>....</div>
Seems to work though: http://jsfiddle.net/CPL6P/
<style>
<div>
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
</div>
should be
<style>
div {
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
Consider CSS3 animation with ship moving above blue div. For some reason the ship isn't moving. The HTML is as follows:
<div id="wrapper">
<div id="sea">
<img src="ship.png" alt="ship" width="128" height="128"/>
</div>
</div>
In order to make CSS3 animation I use the following:
#wrapper { position:relative;top:50px;width:700px;height:320px;
margin:0 auto;background:white;border-radius:10px;}
#sea { position:relative;background:#2875DE;width:700px;height:170px;
border-radius:10px;top:190px; }
#sea img {
position:relative;left:480px;top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
#keyframes myship {
from {left: 480px;}
to{left:20px;}
}
#-moz-keyframes myship {
from {left: 480px;}
to {left:20px;}
}
#-webkit-keyframes myship {
from {left: 480px;}
to{left:20px;}
}
}
The ship image isn't moving. Any help is greatly appreciated.
you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element.
http://jsfiddle.net/aNvSf/
your modified css looks like this:
#wrapper{
position:relative;
top:50px;
width:700px;
height:320px;
margin:0 auto;
background:white;
border-radius:10px;
}
#sea{
position:relative;
background:#2875DE;
width:700px;
height:170px;
border-radius:10px;
top:190px;
}
#sea img{
position:absolute;
left:480px;
top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
}
#keyframes myship{
from {left: 480px;}
to{left:20px;}
}
#-moz-keyframes myship{
from {left: 480px;}
to{left:20px;}
}
#-webkit-keyframes myship{
from {left: 480px;}
to{left:20px;}
}
To animate with left, top, bottom or right, you either have to have a absolutely positioned or floated element. SO, Change the position to absolute.
Also, there was as unclosed braces } before you started to declare the keyframes.
#sea img {
position:absolute;
/* ... */
}
Braces Error:
#sea img{
position:absolute; /* absolute */
left:480px;top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
}
/* ^ You have to close the braces here, before declaring the keyframes.
Here is a working demo