Hi I've been trying to do a simple animation with css and a sprite, and it doesn't seem to work. Am I missing something? I've made a JS Fiddle sample.
Can some one explain me why this doesnt work?
http://jsfiddle.net/CmF6A/
<body>
<div id="wrapper">
<div id="bike">
</div>
</div>
</body>
div#wrapper {
width: 64px;
height: 80px;
background-color: #c0b898;
margin: auto;
}
#-webkit-keyframes running {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: running 1s steps(6, end) infinite;
}
There seems to be a problem with your animation name if you renamed it to something else it works.
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: anim 1s steps(6, end) infinite;
}
#-webkit-keyframes anim {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
An example: http://jsfiddle.net/CmF6A/2/
Here is a JSfiddle :)
I have simply updated your own fiddle.
http://jsfiddle.net/CmF6A/5/
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#keyframes myfirst
{
from {background-position:0px;}
to {background-position:-320px;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background-position:0px;}
to {background-position:-320px;}
}
Check out this tutorial to create Sprite sheet animation
https://medium.com/#Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
Related
I did the animation to rotate around a button, I do not know the tags so well, so I'll probably have many errors in my codes: '(
What annoys me today is that it is not rotating in IE11, I tested in Windows 7 and Windows 10, any browser opens normally, until Edge performs as programmed, except IE11,
The URL of the page in question is http://hb1virtual.com.br/Grafica/
Could someone tell me where I'm going wrong?
(there will be many errors, but this one especially, laughs)
HTML
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-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); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
<div class="menu">
<div class="marquee">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
CSS
There are some CSS mistakes in your animation code.
I try to add a new css code segment and try to apply it on your web page to make it work for IE 11.
Code:
<!doctype html>
<head>
<title></title>
<style>
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% {-webkit-transform:rotate(-360deg);-webkit-transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
.clockwise {
-webkit-animation: clockwiseSpin 10s infinite linear;
animation: clockwiseSpin 10s infinite linear;
}
#-webkit-keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}#keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="menu">
<div class="clockwise">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
</body>
</html>
Output in IE 11:
Further, you can try to check the code and try to modify it in your site.
You can refer the example below.
JS Fiddle Example
First, you should change your Title from Portuguese to English.
Second, You can always inject code into your html, blocking IE users from seeing your website, redirecting them to download another browser.
Nobody uses IE anyway... It's not solving the problem, it's avoiding the question, but it's a solution.
Cheers
I'm trying to create a custom loading spinner using keyframes and a spritesheet.
jsfiddle: http://jsfiddle.net/Flignats/aaaaaf6h/
My issue is that the spinner appears to be sliding (background position) and I'd like it to be stationary while spinning.
My CSS:
.hi {
width: 68px;
height: 68px;
background-image: url("data:image/png;base64, ... );
-webkit-animation: play 1s steps(23) infinite;
-moz-animation: play 1s steps(23) infinite;
-ms-animation: play 1s steps(23) infinite;
-o-animation: play 1s steps(23) infinite;
animation: play 1s steps(23) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
i used CSS step function (link)
this example work fine but change my image that case it is not working perfect anyone guide me
mycode
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}
.hi {
width: 205px;
height: 241px;
background-image: url("images/Street-background-13.png");
margin: 0 auto;
-webkit-animation: wink 6s steps(29, end) infinite;
-moz-animation: wink 6s steps(29, end) infinite;
animation: wink 6s steps(29, end) infinite;
My Image link here
If you change the background colour, and add vendor specific prefixes (oh and add a last curly brace to end your css definition for .hi), it works, check it out:
#-webkit-keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
#-moz-keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
#-o-keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
#keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
.hi {
width: 205px;
height: 241px;
background-color: #000;
background-image: url("http://i.stack.imgur.com/r443O.png");
margin: 0 auto;
-webkit-animation: wink 6s steps(29, end) infinite;
-moz-animation: wink 6s steps(29, end) infinite;
-o-animation: wink 6s steps(29, end) infinite;
animation: wink 6s steps(29, end) infinite;
}
<div class="hi">
</div>
Am trying to animate an image (that uses class="under") and is overlapped by a still image (that uses class="over"). Animation effect works fine for the lower image with Firefox and IE-9 browsers, whereas Chrome does not show animation. Chrome shows both still images.
Any solution please.
.under
{
border-style: solid;
border-color: #0000ff;
border-radius:15px;
position: absolute;
left:173px;
top:0px;
z-index: 1;
}
.over
{
position:relative;
left:100px;
top:20px;
z-index: 2;
border-radius: 15px;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 1000px;
height: 160px;
background-image: url(images/img7.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
}
Thanks
Anand
Try #-webkit-keyframes animatedBackground
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
I use CSS Animation and media queires like this!
HTML
<div class='block'>
<div class='block-bar'></div>
</div>
CSS
.block-bar {
-webkit-animation: timebar 1s infinite;
-moz-animation: timebar 1s infinite;
animation: timebar 1s infinite;
}
#keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0%; }
}
#-webkit-keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0; }
}
}
it work correctly in Chrome and Firefox but not working in IE
How to fix it? Thank you.
The problem is that IE doesn't like it when keyframes are defined within mediaqueries. If you pull the definition for the keyframes outside the mediaquery it works. (Tested in IE11)
#keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0%; }
}
#media(min-width: 300px){
.block-bar {
height: 50px; background-color: red;
-webkit-animation: timebar 1s infinite;
-moz-animation: timebar 1s infinite;
animation: timebar 1s infinite;
}
#-webkit-keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0; }
}
}