I'm very new to animations in CSS, very new indeed. What I'm trying to accomplish is relatively simple conceptually. I want to animate my target element, in which case my background image, back into it's original position.
For example,
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
Would move the background image to it's width, but I'm wondering if it would be possible to animate it back to 0. Otherwise, after reaching it's width, the animation will cut and the background will transition back to 0 instantly, making it seem very choppy.
You might be aware, but defining the animation is a lot like creating a function. You still have to invoke it somewhere.
HTML
<html>
<head>
<title>Hello, Lamb!</title>
<body>
<h1>Hello, Lamb!</h1<
</body>
</html>
CSS
body {
background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
background-repeat: none;
animation: animatedBackground 5s infinite;
}
#keyframes animatedBackground {
0%{
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
http://codepen.io/BigDaddyTeemoe/pen/qdQdMw
Something like this I think:
#keyframes animatedBackground {
0%{
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
Related
The background image isn't smooth when it comes to animate it (some kind of blink) and I can't make it zoom from the image center.
This is for my personnal website I'm trying to make.
*{margin: 0;padding: 0;}
body
{
background-color: #0C090A;
background-image: url(../abstract-bg.png);
animation: zoom 30s infinite;
-webkit-animation: zoom 30s infinite;
}
#keyframes zoom {
0% {
background-size: 100%;
}
50% {
background-size: 105%;
}
100% {
background-size: 100%;
}
}
I would like to get the background image (which is 1920*1080) zoom slowly to 105% of it's original size (or something like that), and then go back to 100%. Also, if it's possible, make it zoom from the center, and not the top left corner. Thanks for those who can help.
yes of course you can :)
just add
background-position:center center;
background-repeat:no-repeat;
in the body css
and add
html{
height: 100%;
}
full css code:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-color: #0C090A;
background-image: url(https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg);
animation: zoom 30s infinite;
-webkit-animation: zoom 30s infinite;
background-position: center center;
background-repeat: no-repeat;
}
#keyframes zoom {
0% {
background-size: 100%;
}
50% {
background-size: 150%;
}
100% {
background-size: 100%;
}
}
you can test the code:
https://playcode.io/358401
It's choppy because the animation duration is too long for 5% of the width of the image. either increase the size or decrease the duration of the animation or use a bigger image.
Or you can use scale() which make use of the GPU i believe, However this time we won't be using the image as a background.
body{
overflow-x:hidden;
}
img {
transform-origin: center center;
animation: zoom 30s infinite;
max-width: 100%;
}
#keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
/* equals 105% */
}
100% {
transform: scale(1);
}
}
<img src="https://picsum.photos/id/238/1920/1080">
I'd like to animate my background image and repeat on x from left to right and right to left when the position is on the end.
My code :
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
body.rotonde{
background-image: url(../pages/bg.jpg);
background-repeat: repeat-x;
animation: animatedBackground 15s linear infinite;
overflow: hidden;
}
My code doesn't work because when the background is on -100%, I get a restart on 0.
The reason why you get a restart on 0 as soon as it reaches -100% is because of how animations work in general. Once they complete a loop, they generally go back to their original state and restart the next loop. So, as soon as it reaches -100% (the end state), it resets the position to 0 (the start state).
from left to right and right to left when the position is on the end
For the above, you can use the animation-direction as alternate. This would make the animation animate the background position from 0 to -100% for odd numbered iterations and then from -100% to 0 for even numbered iterations.
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
body{
background-image: url(http://placehold.it/100x100);
background-repeat: repeat-x;
animation: animatedBackground 15s linear alternate infinite;
overflow: hidden;
}
Note: In the above snippet, it goes from right to left in the odd iterations and left to right in even ones. If you need it the other way around, just reverse the keyframes. My intent was just to give a demo of the alternating motion.
Try this
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(../pages/bg.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
The animation runs to the end and the default is to start again from the beginning.
The "animation-direction" property handles that. Here are some of the options:
normal -Default value. The animation is played as normal (forwards)
reverse -The animation is played in reverse direction (backwards)
alternate -The animation is played forwards first, then backwards
alternate-reverse -The animation is played backwards first, then forwards
initial -Sets this property to its default value.
inherit -Inherits this property from its parent element.
I prefer to use alternate, which runs to the end and then back again in reverse.
Try:
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
body.rotonde{
background-image: url(../pages/bg.jpg);
background-repeat: repeat-x;
animation: animatedBackground 15s linear infinite;
overflow: hidden;
**animation-direction: alternate**;
}
I'm trying to animate a background-image, so that the image appears from right to left.
I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following
background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;
but when the page is loaded, I want the background to be animated, so that it is positioned left. This should take a eg. 2 seconds and only should be done one time. (the image should be positioned left afterwards).
I don't wanna use any mouse-events or pseudo-classes. Is there a way to animate it by using only CSS? I tried finding a solution with keyframes without success.
You could try using this tutorial: CSS Background Animation
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
#-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
#-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
#-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
#-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
html {
width: 100%;
height: 100%;
background-image: url(background.png);
background-position: 0px 0px;
animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
-webkit-animation: animatedBackground 10s linear infinite;
-ms-animation: animatedBackground 10s linear infinite;
-o-animation: animatedBackground 10s linear infinite;
}
Example here: http://jsfiddle.net/verber/6rAGT/5/
Hope it that what you need)
working link: http://sagiavinash.com/labs/tests/css_anim/
This is an unorthodox trick.
<html>
<head>
<style>
.img{
width:1000px;
height:500px;
background:url(1.jpg) no-repeat left;
transition:background-position 1s;
-ms-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
-webkit-transition:background-position 1s;
}
</style>
</head>
<body>
<div class="img"></div>
<link rel="stylesheet" type="text/css" href="style.css">
</body>
</html>
style.css:
img{
background-position:right;
whats happening here is initially the css mentioned in the <style> is rendered.
later since the external stylesheet is in the body just before </body>.
So style.css is loaded after the resources in the are loaded. so there is a lag in implementation of the css which allows us to apply a css transition.
NO JAVASCRIPT, NO EVENTS still we get what we want!
you need to use animation and numbers for value,so it can calculate each position in between start - end.
basicly it would be :
html {
background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
background-size:10%;/* demo purpose */
background-position: 100% 0;
animation: bgmve 2s;
}
#keyframes bgmve {
to {background-position: 0 0;} /* make it short */
}
DEMO
to fire animation on load you can add a class to html via javascript:
onload=function() {
var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)
root.setAttribute( "class", "move" );
}
and css turns to be :
html {
background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
background-size:10%;
background-position: 100% 0;
}
.move {
animation: bgmve 2s;
}
#keyframes bgmve {
to {background-position: 0 0;
}
}
You have tagged Jquery. So will provide you with Jquery function for that.
$( "#ID" ).animate({
left: "50px",
}, 2000);
For class:
$( ".class" ).animate({
left: "50px",
}, 2000);
You can change your value of "Left" acc. to the position you want to give.
set position:relative; to the image with left:50%; for example and on document.ready event reduce the left value to e.g. 0 using jquery animate.
Check out this fiddle
I have two backgrounds:
body {
background-image: url(img/nemo.png),url(img/ocean.png);
}
How do I make nemo.png background move infinitely from left-right but not affecting ocean.png background?
EDIT: When he reaches the right most edge (and the image is no longer visible), he will appear from the left edge again and start doing the drifting from left-to-right.
This can be done with pure CSS 3, e.g keyframed animations:
Demo: http://jsfiddle.net/dghsV/112
body {
background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
background-repeat: no-repeat;
background-position: 50% 0%, 0;
-moz-animation: swim 2s linear 0s infinite;
-webkit-animation: swim 2s linear 0s infinite;
animation: swim 2s linear 0s infinite;
}
#-moz-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#-webkit-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
Syntax
animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
The feature is experimental, so vendor-prefixes (eg -webkit-) have to be added (see also Can I use CSS3 Animation for compatibility notes). In my demo, I've used all properties, except for the last one.
Heres an option:
Create an animated GIF from the nemo.png which is a simple animation of the image moving from left to right.
Then create the layered backgrounds by setting ocean.png to the background of the body of your page.
Then create a div which with the following css:
width:100%;
height:100%;
background-position:center center;
background-image: url(img/moving-nemo.gif);
The div will be an all-encompassing container for all of your content which will give you a layered background effect.
make only ocean the background and create a div with the nemo as background:
<div id="nemo"></div>
#nemo {
background: url(nemo.png) no-repeat;
width: 100px;
height: 100px;
position:absolute;
left: 0px;
top: 500px;
z-index:-10;
}
than you can animate this div with javascript (jQuery):
<script type="text/javascript">
$(document).ready(function() {
SwimRight();
});
//duration is in ms
function SwimRight() {
$('#nemo').css({positionLeft: 0});
$('#nemo').animate(
{ left: $(document).width() },
{ duration: 5000,
easing: normal,
queue: true,
complete: SwimRight}
);
</script>
Why this isn't working? What am I doing wrong?
CSS
#-webkit-keyframes test {
0% {
background-image: url('frame-01.png');
}
20% {
background-image: url('frame-02.png');
}
40% {
background-image: url('frame-03.png');
}
60% {
background-image: url('frame-04.png');
}
80% {
background-image: url('frame-05.png');
}
100% {
background-image: url('frame-06.png');
}
}
div {
float: left;
width: 200px;
height: 200px;
-webkit-animation-name: test;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
DEMO
http://jsfiddle.net/hAGKv/
Updated for 2020: Yes, it can be done! Here's how.
Snippet demo:
#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
#keyframes changeBg{
0%,100% {background-image: url("https://i.stack.imgur.com/YdrqG.png");}
25% {background-image: url("https://i.stack.imgur.com/2wKWi.png");}
50% {background-image: url("https://i.stack.imgur.com/HobHO.png");}
75% {background-image: url("https://i.stack.imgur.com/3hiHO.png");}
}
<div id='mydiv'></div>
Background image [isn't a property that can be animated][1] - you can't tween the property.
Original Answer: (still a good alternative)
Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.
It works in Chrome 19.0.1084.41 beta!
So at some point in the future, keyframes could really be... frames!
You are living in the future ;)
Works for me.
Notice the use of background-image for transition.
#poster-img {
background-repeat: no-repeat;
background-position: center;
position: absolute;
overflow: hidden;
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
This is really fast and dirty, but it gets the job done: jsFiddle
#img1, #img2, #img3, #img4 {
width:100%;
height:100%;
position:fixed;
z-index:-1;
animation-name: test;
animation-duration: 5s;
opacity:0;
}
#img2 {
animation-delay:5s;
-webkit-animation-delay:5s
}
#img3 {
animation-delay:10s;
-webkit-animation-delay:10s
}
#img4 {
animation-delay:15s;
-webkit-animation-delay:15s
}
#-webkit-keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
}
}
#keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
}
}
I'm working on something similar for my site using jQuery, but the transition is triggered when the user scrolls down the page - jsFiddle
I needed to do the same thing as you and landed on your question. I ended up taking finding about the steps function which I read about from here.
JSFiddle of my solution in action (Note it currently works in Firefox, I'll let you add the crossbrowser lines, trying to keep the solution clean of clutter)
First I created a sprite sheet that had two frames. Then I created the div and put that as the background, but my div is only the size of my sprite (100px).
<div id="cyclist"></div>
#cyclist {
animation: cyclist 1s infinite steps(2);
display: block;
width: 100px;
height: 100px;
background-image: url('../images/cyclist-test.png');
background-repeat: no-repeat;
background-position: top left;
}
The animation is set to have 2 steps and have the whole process take 1 second.
#keyframes cyclist {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
}
}
Thiago above mentioned the steps function but I thought I'd elaborate more on it. Pretty simple and awesome stuff.
Your code can work well with some adaptations :
div {
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: contain;
animation: animateSectionBackground infinite 240s;
}
#keyframes animateSectionBackground {
00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}
Here is the explanation of the percentage to suit your situation:
First you need to calculate the "chunks". If you had 8 differents background, you need to do :
100% / 8 = 12.5% (to simplify you can let fall the decimals) => 12%
After that you obtain that :
#keyframes animateSectionBackground {
00% { background-image: url(/assets/images/bg-1.jpg); }
12% { background-image: url(/assets/images/bg-2.jpg); }
25% { background-image: url(/assets/images/bg-3.jpg); }
37% { background-image: url(/assets/images/bg-4.jpg); }
50% { background-image: url(/assets/images/bg-5.jpg); }
62% { background-image: url(/assets/images/bg-6.jpg); }
75% { background-image: url(/assets/images/bg-7.jpg); }
87% { background-image: url(/assets/images/bg-8.jpg); }
}
If you execute this code, you will see the transition will be permanantly. If you want the backgrounds stay fixed while a moment, you can do like this :
#keyframes animateSectionBackground {
00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}
That mean you want :
bg-1 stay fixed from 00% to 11%
bg-2 stay fixed from 12% to 24%
etc
By putting 11%, the transtion duration will be 1% (12% - 11% = 1%).
1% of 240s (total duration) => 2.4 seconds.
You can adapt according to your needs.
The linear timing function will animate the defined properties linearly. For the background-image it seems to have this fade/resize effect while changing the frames of you animation (not sure if it is standard behavior, I would go with #Chukie B's approach).
If you use the steps function, it will animate discretely. See the timing function documentation on MDN for more detail. For you case, do like this:
-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);
See this jsFiddle.
I'm not sure if it is standard behavior either, but when you say that there will be only one step, it allows you to change the starting point in the #keyframes section. This way you can define each frame of you animation.
Like the above stated, you can't change the background images in the animation. I've found the best solution to be to put your images into one sprite sheet, and then animate by changing the background position, but if you're building for mobile, your sprite sheets are limited to less than 1900x1900 px.
I needed to do the same thing recently. Here's a simple implementation
#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
#keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
<div id="wrapper">
<img src="img1.jpg" class="top" style="z-index:2;">
<img src="img2.jpg" style="z-index:1;">
</div>
You can use animated background-position property and sprite image.
You can follow by this code:
#cd{
position: relative;
margin: 0 auto;
height: 281px;
width: 450px;
}
#cf img{
left: 0;
position: absolute;
-moz-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
opacity: 0;
}
<div id="cf">
<img class="button" src="Birdman.jpg" />
<img src="Turtle.jpg" class="top" />
</div>
You can use the jquery-backstretch image which allows for animated slideshows as your background-images!
https://github.com/jquery-backstretch/jquery-backstretch
Scroll down to setup and all of the documentation is there.
Well I can change them in chrome. Its simple and works fine in Chrome using -webkit css properties.