I have to replace image in the image frame from sprite sheet. But right now images are moving one by one. I have also attached my image in png format
.guy {
height: 190px;
width: 150px;
display: inline-block;
background-image: url(sprite_sheet.png);
}
#guy-1 {
-webkit-animation: run-x 10s infinite steps(100);
}
#-webkit-keyframes run-x {
from {
background-position-x: 0;
}
to {
background-position-y: -1950px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Keyframes check</title>
</head>
<body>
<div id="guy-1" class="guy"></div>
Original sprite
</body>
Related
The problem is with an SVG sprite file that I have created with Illustrator CC2020, my svg file doesn't work, but it works with other svg animation.
I think there is useless code in my SVG file (I have cleaned it with online tools), but the problem continues, any ideas.
My code with error animate:
.emoji {
width: 110px;
display: inline-flex;
background-image: url(http://promedia.tonohost.com/perfect-ani.svg);
background-size: auto 100%;
animation: moveX 1s steps(90) infinite;
}
.emoji::before {
content: "";
padding-top: 100%; /* keep the square ratio */
}
#keyframes moveX {
to {
background-position: right; /* you only need to move to right */
}
}
<div class="emoji"></div>
<div class="emoji" style="width:50px"></div>
Code working with svg sprite:
.emoji {
width: 110px;
display: inline-flex;
background-image: url(https://s.pinimg.com/webapp/style/images/wow-0a7ea725.svg);
background-size: auto 100%;
animation: moveX 1s steps(90) infinite;
}
.emoji::before {
content: "";
padding-top: 100%; /* keep the square ratio */
}
#keyframes moveX {
to {
background-position: right; /* you only need to move to right */
}
}
<div class="emoji"></div>
<div class="emoji" style="width:50px"></div>
Link Code SVG Error:
http://promedia.tonohost.com/perfect-ani.svg
I am trying to make a slider using CSS #Keyframes Animation. It works smoothly when I used it for the first time with small size [1100px width and 400px height].
But when I expand the slider and image size for my website, I increase the height and width [1280 * 640]. Then my images are fliker at each interval just for first time, after first time flicker of each image, slider work smoothly.
But I want to prevent it in first time.
CSS:
.slider{
position: relative;
top: 0px;
left: 0px;
background: url(1.jpg);
height: 600px; width: 1263.1px;
margin-bottom: 20px;
animation: slideshow 10s infinite;
}
#keyframes slideshow{
25% { background: url(1.jpg); }
50% { background: url(2.jpg); }
75% { background: url(3.jpg); }
100% { background: url(1.jpg); }
}
HTML:
<div class="slider"></div>
That's because the images haven't loaded, and they only start loading when the animation starts. To prevent this flickering, you can use the onload event in Javascript:
<div class="slider"></div>
<style>
.slider{
background-image: url("1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 540px;
width: 960px;
}
.slider.loaded{
animation: slideshow 10s infinite;
}
#keyframes slideshow{
0%{
background-image: url("1.jpg");
}
25%{
background-image: url("2.jpg");
}
50%{
background-image: url("3.jpg");
}
75%{
background-image: url("4.jpg");
}
}
</style>
<script>
var images = [
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg"
];
function loadImg(i){
if(images[i] != undefined){
var img = new Image();
img.src = images[i];
img.onload = function(){ // detect if image has been loaded
i++;
loadImg(i);
}
}
if(images.length == i) // adding class 'loaded' when all images finished with loading
document.getElementsByClassName("slider")[0].classList.add("loaded");
}
loadImg(0);
</script>
NOTE:
I managed to prevent the flickering, but
This only works perfectly in Chrome
Firefox can't animate the images, but the images are still shown
This is absolutely not working in IE / Edge
Recently I am facing some problem with my code in sprite animation in firefox.
My sprite image file is containing high quality graphics so the size of the image is more than 3MB. The same image with same code is working fine in Chrome.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body {
background-color: grey
}
.myDiv {
width: 650px;
height: 650px;
background: url(imagepath) top center;
animation: animatename 4s steps(120) infinite;
}
#keyframes animatename {
100% {
background-position: 0px -78000px;
}
}
</style>
<body>
<div class="myDiv"></div>
</body>
</html>
I'm trying to fill a glass of beer at 30% with html and CSS with the technique of this progress bar csstricks.
But I don't know if it's possible.
I have an image of the glass of beer with transparency content (png in illustrator).
Do you know if it's possible to have the progress bar in background ?
My tests were fruitless.:-(
Or do I have to use another technique ?
Thanks a lot for your help !
Nicolas
There you go :D (this is what you can do with a few alterations to the css-trick example):
Demo: http://jsfiddle.net/djnBD/
<html>
<head>
<meta charset="UTF-8">
<title>Fillable Beer Bottle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
$(".liquid").each(function() {
$(this)
.data("origHeight", $(this).height())
.height(0)
.animate({
height: $(this).data("origHeight")
}, 1200);
});
});
</script>
<style>
.glass {
height: 200px;
position: relative;
background-image: url('http://i40.tinypic.com/11hyr1j.png'); /* Beer Glass */
background-repeat: no-repeat;
}
.liquid {
z-index:-1;
position:absolute;
bottom:0;
width: 200px;
background-image: url('http://i44.tinypic.com/f0vxbt.jpg'); /* Beer Liquid Pattern */
/* Remove the bottom two lines to stop animation */
-webkit-animation: move 150s linear infinite;
-moz-animation: move 150s linear infinite;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
#-moz-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
</style>
</head>
<body>
<div class="glass">
<span class="liquid" style="height: 30%"></span>
</div>
</body>
</html>
Example (you can modify and test): http://codepen.io/g-liu/pen/XbrMzr?editors=110
I've modified the code to work in Firefox, but the second animation seems to be skipping frames.
frames: http://www.fabiobiondi.com/blog/wp-content/uploads/2012/08/runningGrant.png
html:
<div id="guy-1" class="guy"></div>
<div id="guy-2" class="guy"></div>
Original sprite
css:
.guy {
height: 294px;
width: 165px;
display: inline-block;
background-image: url(http://www.fabiobiondi.com/blog/wp-content/uploads/2012/08/runningGrant.png);
}
#guy-1 {
animation: run-x 0.4s infinite steps(12);
}
#guy-2 {
animation: run-x 0.4s infinite steps(12), run-y 2.4s infinite steps(6);
}
#keyframes run-x {
from {
background-position: 0 0;
}
to {
background-position: -1980px 0;
}
}
#keyframes run-y {
from {
background-position: 0 0;
}
to {
background-position: 0 -1764px;
}
}
I've solved my problem using LESS (http://lesscss.org/)
It maked the css of animation in a generic way that worked in all browsers (even in mobile).