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.
Related
I am trying to Animate a div. What i am actually doing in the animation is translating the div to 100%. but the animation only works in chrome and it is not working in Firefox. i tried to add prefix and i also included prefix-free.js plugin. Caniuse.com says firefox will support animations without prefixing. I have seen lot similar question in stack over flow. but most of them are using property's that are not yet supported in Firefox and other. But mine is very simple. I even tried by removing translation and background-color change. but it is also not working.
HTML:
<div class="container">
<div class="icon"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>
CSS:
.container {
padding:3em;
}
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0 infinite normal both;
}
#keyframes test {
0% {
transform: translateX(50%);
background-color: red;
}
100% {
transform: translateX(0%);
background-color: yellowgreen;
}
}
Demo
Your syntax is invalid. Your zero animation-delay needs to have a unit, so it should be 0s, not 0:
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0s infinite normal both;
}
Unitless zeroes are only permitted for lengths, not times. See this answer for an explanation (the question is about transitions, but it applies to animations as well).
Change your animation call to this,
.icon
{
animation: test 1s linear infinite;
}
It seems firefox does not understands some short hand properties.
Write your code like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
padding:3em;
}
.icon, .icon:hover {
width: 100px;
height: 100px;
background: red;
-webkit-animation: test 2s linear infinite; /* Chrome, Safari, Opera */
animation:test 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes test {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
#keyframes test {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<div class="container">
<div class="icon"></div>
</div>
</body>
</html>
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 */
}
I am making keyframe animation in CSS. The animation seems to be working very well in Chrome as the -webkit syntaxes are supported.
#-webkit-keyframes title_toggle
{
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}
I tried the code below for Firefox, but its not working
#-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}
Please let me know I would this work in FF.
This is the CSS part.
#-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}
.title{
width:40%;
height: 30%;
position: absolute;
top: 10%;
left: 5%;
background-size: 100% 100%;
background-repeat:no-repeat;
-webkit-animation-name: title_toggle;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
background-size: 100% 100%;
-moz-animation-name: title_toggle;
-moz-animation-duration:5s;
-moz-animation-iteration-count:infinite;
}
And this is the HTML
<div class="title"></div>
If you're asking about the lack of cross-fade interpolation between different images, that's a very new addition to the spec that's not widely supported yet.
This is not working because Firefox does not support animations on background images. Background-image is not animatable. Chrome has its own implementation but you won't get it working Firefox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
welp.. I used to have css3 animation that worked on my google chrome but for some
reason it stopped working. i tried to create an example based on that code.
I have no clue why it doesn't work anymore.. any information would be greatly appreciated.
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-transition: all .5s ease;
-webkit-animation-name: bounceup;
-webkit-animation-duration: 1.5s;
}
#-webkit-keyframes bounceup {
from {
opacity:0.5;
-webkit-transform: translateY(100px) rotate(180deg);
-webkit-box-shadow: 20px 20px 80px #000;
}
to {
opacity:1;
-webkit-transform: translateY(0px) rotate(0deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
as you can see it's a keyframes based animation using the 'from' and to' methods.
welp the result here that I just see a red box with no animation what so ever.
thanks!
For some reason, the animation doesn't like the order of translateY(0px), so if you move it, it will work fine: http://jsfiddle.net/joshnh/zJ5A9/
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