I'm trying to make an element's background move on a continuous loop from right to left without the snap back to the initial position and have it be smooth on all screen sizes. I've tried using repeat-x and doubling the image's width, and when it gets to the halfway point the animation loops, but you see it snap back to the first frame. So I came up with this hack (see below), but I'm hoping there's a better, more efficient way without having to use insane numbers and a smaller image.
Is there a way I can make the background repeat (repeat-x) but just move indefinitely?
Here's what I have at the moment:
.container:after {
animation: mist 300s infinite linear;
background: url("images/mist.webp") top left repeat-x;
background-size: cover;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#keyframes mist {
0% {
background-position: 0 0;
}
100% {
background-position: -20376px 0; /* image width x 6 */
}
}
Actually you need to use background-repeat: round, and set the position -100vw, so it will repeat the bg for all the space, and will loop for view width only,
check this snippet
.container:after {
animation: mist 6s infinite linear;
background: url("https://global-uploads.webflow.com/5ef5480befd392489dacf544/5f9f5e5943de7e69a1339242_5f44a7398c0cdf460857e744_img-image.jpeg") top left;
background-size: cover;
background-repeat: round;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#keyframes mist {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
<div class="container"></div>
Related
I have some problems with a CSS transition effect. I don't understand why, but it isn't working. Here is a demo that isn't working :
https://codyhouse.co/demo/ink-transition-effect/index.html
Here is an article about how this effect was done (before, when it did work) :
https://codyhouse.co/gem/ink-transition-effect
The code I'm working on to debug is this one :
https://codepen.io/1019/pen/YzxzNGX
HTML file :
<body>
CSS ANIMATIONS TEST
<div class='cd-transition-layer'>
<div class="bg-layer"></div>
</div>
</body>
CSS file :
.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
}
.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
z-index: 15;
transform: translateY(-50%) translateX(-2%);
height: 100%;
width: 2500%;
background: url('https://i.imgur.com/9uDdPAP.png') no-repeat 0 0;
background-size: 100% 100%;
animation: cd-sprite 5s steps(24);
animation-fill-mode: forwards
}
.cd-transition-layer.opening .bg-layer {
z-index: 15;
animation: cd-sprite .8s steps(24);
animation-fill-mode: forwards
}
#keyframes cd-sprite {
0% {
transform: translateY(-50%) translateX(-2%)
}
100% {
transform: translateY(-50%) translateX(-98%)
}
}
Can you please help me find what is wrong ?
Thank you !
EDIT : Okay, weird : it seems the div just completely disappears during the animation before reappering. If I keep focus on the div in the inspector, it stays there. Is it because it's too long (2500% width) ?
Moving large divs
It seems that animating a large div over the screen very fast can cause a render/flicker in webkit based browsers.
If i have to guess, it's probably due to performance reasons, where the browser cuts off things thats are not in the viewport. when moving to the next frame, it will not have the pixels ready to be rendered, resulting in a flicker.
It becomes more apparent when you remove the steps(24) from the animation.
The div will slide over the screen, and at some point just stop being visible.
Using background-position instead
When animating, instead of moving a div over the screen, we can also opt to move only the background instead.
background: url("https://i.imgur.com/9uDdPAP.png") no-repeat;
background-size: 2500% 100%; /* Size is needed to stretch 1 frame to fit the div */
background-position: 0% 0%; /* we can start from frame 0 */
animation: cd-sprite 1s steps(24);
/* the animation is the same, we only move the background instead. (in 24 steps) */
#keyframes cd-sprite {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
* {
box-sizing: border-box;
}
.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
}
.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
z-index: 15;
height: 100%;
width: 100%;
background: url("https://i.imgur.com/9uDdPAP.png") no-repeat;
background-size: 2500% 100%;
background-position: 4.16% 0%;
transform: translateY(-50%) translateX(-50%);
animation: cd-sprite 1s steps(24) infinite;
animation-direction: alternate;
animation-delay: 1s;
animation-fill-mode: forwards;
border: 36px solid red;
}
#keyframes cd-sprite {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
<body>
<div class='cd-transition-layer'>
<div class="bg-layer"></div>
</div>
</body>
I am trying to add this animation to my background, but when going on mobile device, the background triples even when I set the background size cover, on pc version it works fine, only one background. Why is this happening?
.main {
background-image: url("~#/assets/main-bg.png");
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
overflow-y: scroll;
animation: shrink 5s infinite alternate;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}
#keyframes shrink {
0% {
background-size: 110%;
}
100% {
background-size: 100%;
}
}
You can keep the cover property if you use scale instead of changing background size. Obviously you don't want the whole of main to scale in and out - only the image - so put that as background on the before pseudo element, set it as cover and to transform between scale 1.1 and 1.
That way you get both effects and it's fully responsive.
.main {
width: 100%;
height: 100vh;
overflow-y: scroll;
position: relative;
}
.main::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: shrink 5s infinite alternate;
background-image: url("https://picsum.photos/id/259/1024/768");
background-position: center;
background-size: cover;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}
#keyframes shrink {
0% {
transform: scale(1.1);;
}
100% {
transform: scale(1.0);
}
}
<div class="main"></div>
Add in this css property background-repeat: no-repeat;
This will stop the background image from appearing more than once.
Also, your keyframes changes the background size from cover to 100/110%. Over riding the property.
Not quite a pulse animation -- but somewhat similar (not radial, but linear) -- I am trying to create the effect of sort of a lens flare if you turn a piece of glass and see a band of light swipe across it, in CSS. So say you have a regular background image, or a seamless repeating background image, in CSS. Now you want to animate across that image a rectangular band of light that is sort of a "fade-in ... full light ... fade-out" gradient of white light. So you have a linear-gradient sort of like transparent, semi-transparent-white, white, semi-transparent-white, transparent that flows across the background image (seamless/repeating background image, or regular background image), repeatedly flowing across like it was a pool of water in constant motion.
Wondering if this sort of thing is possible in CSS, and how to do it.
Maybe it is simply an animated linear-gradient mask (which I am not familiar with but have heard of). Not sure.
Basically animating a semitransparent linear gradient like this (just the line part, and imagine it was a simple rectangle).
Are you looking for something like below:
body {
margin:0;
height:100vh;
background:
linear-gradient(to right,transparent 33%,white,transparent 66%),
url(https://picsum.photos/id/10/800/800) center;
background-size:300% 100%,cover;
animation:change 2s linear infinite;
}
#keyframes change {
from { /*Use "to" to change the direction */
background-position:right,center;
}
}
html {
background:#fff;
}
Related to get more details about the calculation:Using percentage values with background-position on a linear gradient
NOt sure if this is what you are looking for. Here it is a shot!
.ripple{
width: 50px;
height: 50px;
display: block;
position: relative;
background-color: #00ccff;
border-radius: 100%;
opacity: 0.5;
}
.ripple:before, .ripple:after{
content: '\0020';
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
border: 2px solid #0088ee;
transform: translate(-50%, -50%);
}
.ripple:before{
animation: ripple-one 2.5s infinite;
}
.ripple:after{
animation: ripple-one 3.5s infinite;
}
#keyframes ripple-one{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
#keyframes ripple-two{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
<label class="ripple"></label>
Im new to css animation, so I got this sequence movements picture online and want to make it walks. I follow a tutorial but it doesn't work in this case. I'm trying to make it moves. I don't know how to properly do that so I start with the first row of image. Its dimensions are 832x228.
and this is CSS code:
.sprite {
width: 130px;
height: 130px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
}
#keyframes walker {
0% {
background-position: 0 0;
}
100% {
background-position: 832px 0px;
}
}
<div class="sprite"></div>
You are on the right path but the background-position is wrong within the keyframes. Sprite images should move from the right to the left in order to produce a moving animation and so the background position should go from 0 0 to -832px 0.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/* image size is 832x228, so height is set as half of it */
}
#keyframes walker {
0% {
background-position: 0 0;
}
100% {
background-position: -832px 0px;
}
}
<div class='sprite'></div>
As mentioned in Robert C's answer, this will still not get the second row of images to show up. This is because the Y part of background-position doesn't change within the keyframes. The below snippet kindly contributed by Mishko Vladimir is one way to get them to display but problem is that if the no. of steps is increased to 16 (so as to show all sprites) then the animation doesn't work properly anymore.
Also, there will be a blink at the point where Y position changes. So, my recommendation would be to put all 16 sprites in the same row instead of two.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/*832x228*/
}
#keyframes walker {
0% {
background-position: 0 0;
}
50% {
background-position: -832px 0px;
}
51% {
background-position: 0 -114px;
}
100% {
background-position: -832px -114px;
}
}
<div class='sprite'></div>
Looks like you have the wrong background-position, it should be -832px rather than 832px. Note that with the above image you're also only going to get the top 8 frames, you'll need to edit the file to get the bottom 8 for a longer transition.
You may also want to adjust the time in your animation down to a fraction (I had a smoother walk with 0.9), and you'll want to shrink your width and height down to around 115px to avoid seeing some of the other frames.
Using the second answer found here. I combined my images into a sprite and then updated my CSS to reflect the keyframes element like in the example provided. The sprite image (castle) shows up but the slide effect does not take place? What am I missing?
Sample URL, center element on home page: http://216.157.26.175/cookiedouglas/
Here is my CSS:
.agentpress-pro-cookie .home-featured .widget {
/* background-color: rgba(255, 255, 255, 0.8); */
background: url("http://216.157.26.175/cookiedouglas/wp-content/uploads/sites/58/2015/05/fort-myers-homes-for-sale.jpg");
opacity: 0.95;
content: '';
/* position: absolute;
width: 400%;
height: 100%; */
z-index: -1;
/* background: url(http://placekitten.com/500/500/); Image is 500px by 500px, but only 200px by 50px is showing. */
animation: slide 3s infinite;
}
#keyframes slide {
20% {
left: 0;
}
40%, 60% {
left: -50%;
}
80%, 100% {
left: -100%;
}
}
Use browser (vendor) specific prefixes.
Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.
CSS3 animation is one of those features. It has partial support across different browsers. Browser support for CSS3 animations can be checked here.
As evident from the above link, to make the animation work on browsers other than IE and Firefox, you meed the -webkit- prefix.
Also, CSS left propery works only with absolutely positioned elements.
So you should try something like this (read added comments in snippet for explanation):
/*visible portion of the larger 5120x680 pixel image*/
.widget {
width: 1024px;
height: 680px;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.widget:before {
content: '';
position: absolute;
/*needed for CSS left property to work*/
width: 5120px;
height: 680px;
z-index: -1;
/*ExampleImageSprite.jpg is a 5120x680 pixel image which is a combination of 5 individual 1024x680 pixel images*/
background: url("https://dl.dropboxusercontent.com/u/192824325/00_sandbox/30150865/ExampleImageSprite.jpg");
-webkit-animation: slide 10s infinite;
animation: slide 10s infinite;
}
#-webkit-keyframes slide {
0% {
left: 0px;
}
20% {
left: -1024px;
}
40% {
left: -2048px;
}
60% {
left: -3072px;
}
80% {
left: -4096px;
}
100% {
left: -5120px;
}
}
#keyframes slide {
0% {
left: 0px;
}
20% {
left: -1024px;
}
40% {
left: -2048px;
}
60% {
left: -3072px;
}
80% {
left: -4096px;
}
100% {
left: -5120px;
}
}
<div class=widget></div>