I have this: http://d.pr/i/A2b3 which acts as the divider between the header and the main content.
The image is set as the background image, repeat-x, of the header container.
<header> <--- image is background of this
<div id="container"></div>
</header>
I want the image to slide across the screen slowly almost in a wave like effect. Is this possible with CCS3 animations? If so can someone help?
Thanks
I would suggest using jQuery and a simple image slider with a shortened image pause so the image keeps on switching. As far as i know its not possible to get a video to appear in a slider (not without a play button of some sort). http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/ would be an example of what i would use.
Try this!
CSS:
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
I created a Fiddle for you to play with here:
http://jsfiddle.net/e3WLD/3/
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">
This question already has answers here:
background-position-y doesn't work in Firefox (via CSS)?
(9 answers)
Closed 3 years ago.
I know this has been answered somewhere already, but can't figure out what's wrong.
I have used repeating-linear-gradient for background and #-webkit-keyframes and #keyframes for animating it. It does work in google chrome but not in firefox.
HTML
<div class="menu_block"></div>
CSS
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position-x:0%;
-webkit-animation:'slide' 30s infinite linear forwards;
}
#-webkit-keyframes 'slide' {
0%{background-position-x:0%;}
100% { background-position-x:100%;}
}
#keyframes 'slide' {
0%{ background-position-x:0%; }
100% { background-position-x:100%;}
}
jsfiddle is here
https://jsfiddle.net/mathews8881/0cj3L6wu/
Could somebody please help.
Try animating both params background-position: 0% 0;. Also missing non-prefixed animation rule.
.menu_block {
height: 100px;
width: 500px;
background: repeating-linear-gradient(45deg, #000, #000 20px, #fff 20px, #fff 40px);
background-size: 56px 56px;
background-position: 0 0;
-webkit-animation: slide 30s infinite linear forwards;
animation: slide 30s infinite linear forwards;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
#-webkit-keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
<div class="menu_block">
</div>
Remove the single quotes on the animation/keyframes property values, the -webkit- prefix on animation and use background-position: 0%; instead of background-position-x:0%; (as mentioned in a comment, background-position-x is not supported across browser).
Note, since your prefixed properties weren't consistent applied I removed all of them, so you need to add them back to cover older browser versions needing them. Also, in your case, no need to use forwards in your animation when using infinite
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position:0%;
animation: slide 30s infinite linear;
}
#keyframes slide {
0%{ background-position:0%; }
100% { background-position:100%;}
}
<div class="menu_block">
</div>
The following image is to be used in a keyframes animation by moving the background-image position 100% to the right on each frame:
The idea is that the ArrowsAnim.png has 7 frames of the same image (the set of 3 chevrons pointing to the right) in different animation states. The animation arrowAnimation (CSS below) simply skips through background-position 0% to 300% to show the first three frames of this image over 0.5 seconds, repeatedly.
What's happening is that when I resize the browser window, I can sometimes see some pixels of the next or previous frame of the animation, instead of having the background perfectly centered around whichever should be the current block, as you can see in the next picture:
So for some reason, background-position is not being calculated correctly.
I also cannot reproduce this issue on Chromium, but I can do so on Chrome, Firefox and Edge.
CSS:
#autoplay-arrow {
display: inline-block;
position: absolute;
width: 5.91549%;
top: 22.05882%;
height: 50.74627%;
margin-left: 18.30986%;
background-size: 100% 100%;
background-position: 0 0;
background-image: url(../graphics/Arrows_002.png);
}
#-moz-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#-webkit-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#autoplay-arrow.anim {
background-image: url(../graphics/ArrowsAnim.png);
background-size: 700% 100%;
-moz-animation: arrowAnimation 0.5s steps(3) infinite;
-webkit-animation: arrowAnimation 0.5s steps(3) infinite;
animation: arrowAnimation 0.5s steps(3) infinite;
}
I've been racking my brain on whether it's possible to have a div show a never-ending "conveyor belt" pattern that always goes in one direction.
You can take a div, tile a background image in one direction with repeat-x, then create a keyframe that moves the background-position by the width of one tile, which will bring the background to the same position where it was at the beginning of the transition.
What I can't figure out is how to "reset" the background-position, so that the cycle can run once again and create the illusion of continuous single-direction motion. Can this be done in CSS?
I could animate a gif and fake it that way, but they are rather large/slow to load & there is always a stutter during the loop.
Thanks!
Found something relevant on a website, after a brief search.
Sprites file:
Fiddle:
http://jsfiddle.net/CGmCe/8676/
Browser support: http://caniuse.com/#feat=css-animation
HTML:
<div class="hi"></div>
CSS:
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
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