I tried adding -moz- but it doesnt wave.. it works on chrome but not on mozilla firefox
I don't know whats wrong with it.. and help would be appreciated.. I doesnt animate on mozilla firefox :(
here is the code
<ul class="notes-dance">
<li>♩</li>
<li>♪</li>
<li>♫</li>
<li>♪</li>
<li>♫</li>
<li>♬</li>
<li>♩</li>
<li>♫</li>
<li>♬</li>
<li>♩</li>
</ul>
and the css code :
ul li {
display: block;
float: left;
font-size: 2em;
color: #ccc;
text-shadow: 0 -1px 0 white, 0 1px 0 black;
}
.anim {
-moz-animation: music 1s ease-in-out both infinite;
-webkit-animation: music 1s ease-in-out both infinite;
animation : music 1s ease-in-out both infinite;
}
#-webkit-keyframes music {
0%,100% {
-moz-transform: translate3d(0,-10px,0);
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
}
50% {
-moz-transform: translate3d(0,10px,0);
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
}
#-moz-keyframes music {
0%,100% {
transform: translate3d(0,-10px,0);
}
50% {
transform: translate3d(0,10px,0);
}
}
.notes-dance{
left: 30%;
right: 50px;
top: 90%;
position: absolute;
}
Use This One for #-moz-keyframes
#-moz-keyframes music {
0% {-moz-transform: translate3d(0,-10px,0);}
50% {-moz-transform: translate3d(0,10px,0);}
100% {-moz-transform: translate3d(0,-10px,0);}
}
You added #-moz-keyframes with no -moz-transform !! and you added -moz-transform to #-webkit-keyframes
As per http://caniuse.com/#feat=css-animation:
#keyframes not supported in an inline or scoped stylesheet in Firefox (bug 830056)
Are you using it in an inline or scoped way? If so, there's your answer.
Related
I have one SVG image and I have added animation on it using CSS it works fine in Chrome and Mozilla, and also on Android but not working on iOS both Chrome and Safari.
The problem is that I can see the image displayed but the animation spinning is not working.
I have the following animation applied to my simple SVG:
<img class="img-sth"src="/img/image.svg">
The css code:
.img-sth {
position: absolute;
height: 80px;
top: -3px;
left: 16px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Below see snippet where I added the 0% {} to each #keyframes definition. Your code did not work for me on macOS Safari (desktop) either when I initially tested it so I thought it may have been an issue with how the #keyframes animation was defined. See MDN docs for more info.
I used a placeholder image for the demo and tweaked the positioning so it was all in the viewport.
.img-sth {
position: absolute;
height: 80px;
top: 20px;
left: 20px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster {
0% {}
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
<img class="img-sth"src="https://via.placeholder.com/80x80">
I'm trying to perform a simple CSS transform on :hover — which is obviously an easy task usually but I'm trying to do it on an animating div element. The element is infinitely animating on the Y axis with a simple CSS animation using #keyframes{}, but when I attempt to hover over the element nothing happens.
I can get it to kind of work if I use !important on the hover code, but the transform/scale happens instantly instead of using the 300ms transition property that I've applied to the .box class.
Am I missing something obvious, or is this not possible? Essentially I just want the element to scale on hover using the transition effect and timing, but then resume it's original animation when not hovered. Thanks
.box {
width: 50%;
border: solid 3px #555;
animation: box-move 1s infinite alternate-reverse;
transition: transform 300ms;
}
.box:hover {
transform: scale(1.2);
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
<div class="box">I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div>
Because you are using transform property on hover and in animation both.
Try this one.
.box {
width: 50%;
border: solid 3px #555;
animation: box-move 1s infinite alternate-reverse;
transition: transform 300ms;
}
.box:hover {
animation: box-move-anim 1s infinite alternate-reverse;
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
#keyframes box-move-anim {
0% {
transform: translateY(0) scale(1);
}
100% {
transform: translateY(-5px) scale(1.2);
}
}
Consider another wrapper:
.box {
width: 50%;
animation: box-move 1s infinite alternate-reverse;
}
.box> div {
border: solid 3px #555;
transition: transform 300ms;
transform-origin:top left;
}
.box:hover > div {
transform: scale(1.2);
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
<div class="box"><div>I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div></div>
Ok, so thanks to your clever and helpful suggestions I managed to find a satisfactory solution. The key for me was using the animation-direction property set to forwards on the :hover. I can't really explain why this works but all I know that it doesn't work properly without it.
I would still ideally like the scale out (hover off) to be as smooth as the scale in (it currently just snaps back), but this will do for my needs.
Thanks again.
.box {
width: 50%;
margin: 1em auto 0 auto;
border: solid 3px #555;
cursor: pointer;
animation: box-move 1s infinite alternate-reverse;
}
.box:hover {
animation: box-move-anim 300ms 1 forwards;
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
#keyframes box-move-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
<div class="box">I'm a box that animates up and down, but I now smoothly scale when hovered :)</div>
Looking to build something like this - a spin the wheel - using only HTML and CSS, without Javascript
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel
Looking for some references or even to see if it can be done.
This is using the Hover effect of spinning. Since css doesn't have event handlers, you can't add/remove classes. However, you can add hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
Hover to see effect: <div>Spin</div>
If you could use a tiny bit of javascript, you could do something like this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>
Note:
The script here is purely toggling the class 'thisIsAdded'.
As Justinas pointed out We cant fire css style on click event. You need javascript for that. However you can use CSS animation to achieve the spin effect but only with pseudo-selectors.
below is a sample spin effect using only CSS
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Here you go.. Fiddle
CSS:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Having an issue with my CSS3 animation in Firefox and Safari. It works like a charm in Chrome and Internet Explorer. Spent a while attempting to figure this out myself, but no success. I followed all of the rules I could find, but I must be missing something.
HTML
<div class="background">
<div id="canvas" class="loading"></div>
CSS
.background {
background:#333;
padding-bottom: 140px;
padding-top: 65px;
}
#canvas.loading {
-webkit-animation: animate 1.5s linear infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate 1.5s linear infinite;
clip: rect(0, 80px, 80px, 40px);
height: 80px;
width: 80px;
position:absolute;
left:45%;
}
#-webkit-keyframes animate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(220deg)
}
}
#keyframes animate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(220deg)
}
}
#-moz-keyframes animate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(220deg)
}
}
#canvas.loading:before {
-webkit-animation: animate2 1.5s ease-in-out infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate2 1.5s ease-in-out infinite;
clip: rect(0, 80px, 80px, 40px);
content:'';
border-radius: 50%;
height: 80px;
width: 80px;
position:absolute
}
#-webkit-keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(140deg);
}
}
#-moz-keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(140deg);
}
}
#keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(140deg);
}
}
Here is the JSFIDDLE: http://jsfiddle.net/myo4r9kk/
Any help would be greatly appreciated!
Works for me in FF 35, can't say more than that.
Safari needs the transform property to be prefixed, so changing your css to the following will make it work (only included the relevant parts):
#-webkit-keyframes animate {
0% {
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(220deg)
transform: rotate(220deg)
}
}
#-webkit-keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
}
It's probably best to change your #keyframes in the same way, just in case Safari one day supports unprefixed #keyframes but still needs prefixed transform rule.
And one last thing: It is generally considered safest to put the prefixed versions of a property before the standard version. I'm not totally sure but I guess that applies to keyframes as well, so you might want to put your #-moz-keyframes before your #keyframes. That may even solve your problems with Firefox (assuming a working implementation of the standard gets overwritten by a buggy version because you put the prefixed after the standard.
I took the liberty to update your fiddle with all those changes: http://jsfiddle.net/myo4r9kk/2/
EDIT
I just found this in your code:
-webkit-animation: animate2 1.5s ease-in-out infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate2 1.5s ease-in-out infinite;
Maybe that explains the problems with Firefox, are you by any chance testing this on FF < 15? In any case that -moz-animation should be the same as the other two.
I am trying to achieve an infinite blink and rotation together, but the problem I face is quite weird, the blinking which should occur at a regular interval of 500ms, happens nicely for a while then disappears and appears back again.
Also I went through lot of questions around blinking but my test case is different. I can't keep the 0% 50% 100% in the keyframes to get the blinking working because I'd want the span to blink at a particular percentage I specify.
For example: I'd want the span to blink at 100deg or 90deg, so I should be able to specify the blink timing by specifying the exact percentage value.
Here's my work so far, any help would be appreciated. http://jsfiddle.net/8UQ8X/7/ (includes vendor prefixes)
<div>
<span></span>
</div>
<style>
div{
position: fixed;
width:3px;
height:100px;
left: 300px;
top: 100px;
border: 1px rgba(255,255,255,0.1) solid;
-webkit-animation: spin 500ms steps(30) infinite;
-webkit-transform-origin: center center;
-webkit-transform: translate3d(0, 0, 0);
}
span{
display:block;
width: 2px;
height: 2px;
border-radius: 50%;
-webkit-animation: blink 500ms infinite steps(1);
}
#-webkit-keyframes spin {
from{
-webkit-transform: rotate(0deg)
}
to{
-webkit-transform: rotate(360deg)
}
}
#-webkit-keyframes blink {
// I should be able to any percentage value to get the span blink at a particular degree.
// for now I am trying to blink the span at 0%, the beginning, later I might change it to 50% or something
0% {background: #fff}
1% {background: none;}
}
body{
background: #232323;
}
</style>
Try this : Animation
.i{
position: fixed;
width:10px;
height:150px;
left: 300px;
top: 100px;
border: 1px rgba(255,255,255,0.1) solid;
-webkit-animation: spin 500ms steps(30) infinite;
-webkit-transform-origin: center center;
-webkit-transform: translate3d(0, 0, 0);
-moz-animation: spin 500ms steps(30) infinite;
-moz-transform-origin: center center;
-moz-transform: translate3d(0, 0, 0);
-webkit-animation-timing-function:ease-in-out;
}
span{
display:block;
width: 10px;
height: 10px;
border: 1px rgba(255,255,255,0.1) solid;
border-radius: 50%;
-webkit-animation: blink 500ms infinite steps(1);
-moz-animation: blink 500ms infinite steps(1);
-webkit-animation-timing-function:liner;
}
#-webkit-keyframes spin {
from{
-webkit-transform: rotate(0deg)
}
to{
-webkit-transform: rotate(360deg)
}
}
#-moz-keyframes spin {
from{
-moz-transform: rotate(0deg)
}
to{
-moz-transform: rotate(360deg)
}
}
#-webkit-keyframes blink {
0% {background: #fff}
1% {background: none;}
}
#-moz-keyframes blink {
0% {background: #fff}
1% {background: none;}
}
body{
background: #232323;
}