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 */
}
Related
I think from my current reading up on documentation and google related searches that IE 9 doesn't like opacity... I have this css and wanted to know why IE 9 doesn't like it... can anyone add to my understanding on this?
#logo-title{
background-image: url("../images/mthc/logo-whole.png");
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 250px;
border: 0 ;
height: 180px;
width:780px;
z-index : 2500;
opacity:0;
EDIT :- Further reading concludes that the below code is actually the problem as ie9 doesn't support all the good stuff in css3 .... a js alternative needs to happen but unable to get this code to work...
$("#logo-title").fadeIn();
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
-webkit-animation-delay: 11s; /* Chrome, Safari, Opera */
animation-delay: 11s;
-moz-animation-delay: 11s;
-ms-animation-delay: 11s;
-o-animation-delay: 11s;
animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
EDIT - I FORGOT TO INCLUDE THE FADEIN ANIMATION ...
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
It seems to me that CSS3 Animations aren't supported in IE9 and you need to use a fallback, such as Modernizr - as mentioned in this thread: Using CSS3 Animations in IE9+
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 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.
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
i want so zoom a picture. Webkit works fine, but Firefox is not working. Did i misspell something? I can't find anything...
<!DOCTYPE html>
<html>
<head>
<title>Zoom Hover</title>
<style type="text/css">
#-moz-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
#-webkit-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
img {
width:200px;
height:auto;
}
img:hover {
-moz-animation-name: 'zoom' 2s;
}
img:hover {
-webkit-animation: 'zoom' 2s;
}
</style>
</head>
<body>
<img src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/>
</body>
</html>
A demo you'll find here: http://jsfiddle.net/pDERw/
-moz-animation -name is your problem but do not use -moz-animation for such a simple animation.
img {
width:200px;
height:200px;
-moz-transition-duration: 2s; /* firefox */
-webkit-transition-duration: 2s; /* chrome, safari */
-o-transition-duration: 2s; /* opera */
-ms-transition-duration: 2s; /* ie 9 */
}
img:hover {
width: 1000px;
height: 1000px;
}
Example
Mozilla doesn't support CSS3 animations before version 5.0. I found it:
You use -moz-animation-name: 'zoom' 2s;. You should use animation's shorthand property:
`-moz-animation: 'zoom' 2s;'
Also you shouldn't enclose animation name in ' marks. See the update here, and please use Firefox version 5+.
Put all your hover code in one css tag, maybe it's overwriting your previous css rules.