i have a question about css steps animation, so i have 12 images, and i want to slide this images like animated gif. But i couldn't achieve that.
My Demo : http://cssdeck.com/labs/full/9hwv565g
what i want to : http://cssdeck.com/labs/css-image-sprite-animations-with-steps-function
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
.hi {
width: 120px;
height: 120px;
background-image: url("http://i44.tinypic.com/nq7mrp.png");
margin: 0 auto;
-webkit-animation: wink .8s steps(10, end) infinite;
-moz-animation: wink .8s steps(10, end) infinite;
animation: wink .8s steps(10, end) infinite;
}
Can you help me?
Thanks in advance
You need to adjust the background-position value and the steps argument, in you case your image measures 1595px in width and has 12 frames:
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
.hi {
width: 133px;
height: 126px;
background-image: url("http://i44.tinypic.com/nq7mrp.png");
margin: 0 auto;
-webkit-animation: wink .8s steps(12, end) infinite;
-moz-animation: wink .8s steps(12, end) infinite;
animation: wink .8s steps(12, end) infinite;
}
Demo here
Related
I have created a div with a background image. Using keyframe animation I want it to move vertically up continuously, which it does however at the end of the frame it jumps then continues. I am new with keyframes. I can not use JS.
I have tried looking at the questions on here but they are mainly focused on sliders.
This is my code so far:
<style>
#animate-area {
background-image: url(/image.png);
width: 100%;
height: 500px;
background-position: 0px 0px;
background-repeat: repeat-x;
-webkit-animation: animatedBackground 5s ease-in-out infinite;
-moz-animation: animatedBackground 5s ease-in-out infinite;
animation: animatedBackground 5s ease-in-out infinite;
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
</style>
<div id="animate-area"></div>
As soon as the frame has finished it jumps and then continues. Is it possible to for it to continuously loop without jumping with a background image? If so, how?
Live example to continuously move up :
#animate-area {
background-image: url('https://pt.freelogodesign.org/Content/img/logo-ex-2.png');
width: 100%;
height: 500px;
background-position: 0;
animation: slideup 5s linear 1s infinite;
position:absolute;
}
#keyframes slideup {
0% { background-position: 0 0; }
50% { background-position: 0 -500px; }
100% { background-position: 0 -900px; }
}
<div id="animate-area"></div>
you can use twice the same image with opposite coordonates to move from/to :
#animate-area {
background-image: url(http://dummyimage.com/100&text=img_1), url(http://dummyimage.com/100&text=img_2);
width: 100%;
height: 500px;
background-position: 0px 0px, 0 -100%;
background-repeat: repeat-x;
animation: animatedBackground 5s ease-in-out infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0, 0 -100%;
}
to {
background-position: 0 100%, 0 0;
}
}
<div id="animate-area"></div>
different text is used to show what happens
How do I slow down this animation and make it smoother for all browsers? Is there any possible way?
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 10s linear infinite alternate;
}
<div id="animate-area"></div>
Simply give the animation a longer duration.
The following changes it from 10s to 30s:
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 30s linear infinite alternate;
}
<div id="animate-area"></div>
I want to create an animation with falling objects, with different start time and different falling speed. The objects stop falling when they reach the position in the image (see below).
What's the best way to actually animate this? Should I use Adobe animator/After effects or is CSS enough?
I'm open for suggestions.
The black lines are going down even when the object stop (please ignore the shadows beneath the object)
Try something like this
img {
transition: all 5s;
top: 0;
position: absolute;
}
img#abc {
left: 50px;
}
img#def {
left: 120px;
}
img#ghi {
left: 180px;
}
img.abc {
transition: all 5s 1.5s;
top: 150px;
}
img.def {
transition: all 3s 0.5s;
top: 175px;
}
img.ghi {
transition: all 4s 1s;
top: 165px;
}
<script>
function myFunction() {
var element = document.getElementById("abc");
element.classList.add("abc");
var element = document.getElementById("def");
element.classList.add("def");
var element = document.getElementById("ghi");
element.classList.add("ghi");
}
</script>
<button onclick="myFunction()">Try it</button>
<img src="https://i.stack.imgur.com/NDtpp.png" id="abc" height="50" width="50"/>
<img src="https://i.stack.imgur.com/NDtpp.png" id="def" height="50" width="50"/>
<img src="https://i.stack.imgur.com/NDtpp.png" id="ghi" height="50" width="50"/>
Code for background-animation
#keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 100%;; }
to { background-position: 0 0; }
}
#-ms-keyframes animatedBackground {
from { background-position:0 100%;; }
to { background-position: 0 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 100%;; }
to { background-position: 0 0; }
}
#animate-area {
width: 100%;
height: 400px;
background-image: url(https://image.ibb.co/kuXpay/static.png);
background-position: 0 100%;
background-repeat: repeat-y;
animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite;
-moz-animation: animatedBackground 20s linear infinite;
-webkit-animation: animatedBackground 20s linear infinite;
}
<div id="animate-area">
</div>
Html5:
<div id="slideshow">
<div id='animate-area'>
</div>
</div>
Css:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 145px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('../img/banner.png');
animation: animatedBackground 40s 5s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 30s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
JSfiddle:
jsfiddle.net/cz04c4nx/1
Using this image, I need show like, http://jsfiddle.net/5pVr4/6/. I tried, but for my particular image url('../img/banner.png') when run in localhost, can't able to get.
I think i solved your problem. You can use this code and it may be help you.I edited that code which you can make similar animate background image.
CSS Code:
#-webkit-keyframes MOVE-BG {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-550px);
}
}
#content {
height: 100px;
text-align: center;
font-size: 26px;
color: white;
position: relative;
overflow: hidden;
}
.bg{
position: absolute;
left: 0;
right: -550px;
top: 0;
bottom: 0;
background: url(http://s30.postimg.org/qnju89rkx/banner.png) 0% 0% repeat;
z-index: -1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
Live Working Demo
CSS help
Can somone please tell me why this the background animation is only working for chrome?
Its not work on firefox or IE.
#animate-area {
width: 100%;
background-position: 0px 0px;
background-repeat: repeat;
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
#keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
You have added below code in you css .. check the animation name here extra _m is added. this is the reason your animation is not working on IE and Firefox.
#keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
Check the working DEMO here.
#animate-area {
width: 100px;
height:100px;
background:url("http://lorempixel.com/100/100/");
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
#-webkit-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
#-moz-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
#keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}