I'm trying to do animation with my background image and I manage to do it. But I my animation is not running smoothly. If I reduce the animation from 30s to 5s it running smooth but the animation is too fast.
My CSS :
body {
height: 100%;
width: 100%;
background: url('https://static.pexels.com/photos/3768/sky-sunny-clouds-cloudy.jpg') center center no-repeat;
background-size: cover;
background-position-y: 0;
animation: grow 30s linear infinite;
}
#keyframes grow {
0% { background-size: 100% auto; }
50% { background-size: 140% auto; }
100% { background-size: 100% auto; }
}
Check the result here https://jsfiddle.net/6q3obw82/
Try changing the keyframes for the code with adding more breakpoints
#keyframes grow {
0% { background-size: 100% auto; }
25% { background-size: 150% auto; }
50% { background-size: 200% auto; }
75% { background-size: 150% auto; }
100% { background-size: 100% auto; }
}
Jsfiddle link: https://jsfiddle.net/xgjmesrr/
Related
I'd like to have a wavy background on top of my regular background but the image is not stretching all the way out. It has to be position absolute (otherwise it's interfering with my navigation and moves it down by the height of the img). JSFiddle. I already tried object-fit: fill which also didn't work. Thanks in advance
My code:
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>
Instead of applying css to #background apply it in #background img thats where you want to change object fit property.
replace this
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
with this
#background img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 15%;
}
You can check the output below
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>
Use this property
#background{
background:url(...);
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat;
height: 500px;
width:100%
}
You can just set width and height to 100% for an image that it should all space of container:
#background img {
width: 100%;
height: 100%;
}
I have a background (cloud) and I want to animate it horizontally. If I start the animation from the left most position then the animtion is smooth but if I start the animation from the center the it becomes abrupt.
I know why is it behaving so but not getting a clue on how to make it smooth.
See the abrupt on when starting from the middle:
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 30vw 0;
}
to {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
Ideally, it should start from the center, then should go to the rightmost point and then should come out from the leftmost point and continue to reach to the center.
Solution 1: Not amazing
By your definition of "smooth" (i.e., going out the right and coming out the left), you can add additional breakpoints. Just make sure to set the percentage timings correct so that it is travelling the same speed before and after reaching the right edge.
If you make the jump between right edge and left edge fast enough, it should show smoothly.
body, html {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
}
#keyframes animatedBackground {
0% {
background-position: 30vw 0;
}
63.6% {
background-position: 100vw 0;
}
63.6000001% {
background-position: -10vw 0;
}
100% {
background-position: 30vw 0;
}
}
<div class="trt-clouds-1"></div>
(The animation travels 110vw total: 70 to the right, and 40 on the way back. To make it smooth, the animation spends 7/11 (63.6%) of the way going there, and the rest coming back, hence the timings.)
Solution 2: Pretty elegant
A second, more elegant option would be to use the animation-delay property with a negative start value. (This doesn't start at exactly 30vw, but you get the point).
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: -2s;
}
#keyframes animatedBackground {
0% {
background-position: -10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-position: 0 0; /* or you can add -10vw 0 for more flexible view on start of load*/
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: 0;
}
#keyframes animatedBackground {
0% {
background-position:-10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
the only thing you have to is add a background position to your css
Another trick is to rely on some percentage and optimize the animation like below.
.trt-clouds-1 {
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 10vw) 10vw;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
It will also work even with a non-full width div since we are no more relying on vw unit inside the animation:
.trt-clouds-1 {
height: 200px;
width:200px;
border:1px solid;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 50px) 50px;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
Related question to get more details about the calculation: Using percentage values with background-position on a linear gradient
You can also consider pseudo element and translation to have better performance:
.trt-clouds-1 {
height: 200px;
position:relative;
overflow:hidden;
}
.trt-clouds-1:before {
content:"";
position:absolute;
top:0;
left:0;
width:calc(200% + 10vw);
height:10vw;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: auto 100%;
background-position:center;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
transform:translate(-50%);
}
}
<div class="trt-clouds-1"></div>
I've got this sample sprite grid sheet that I need to run through and animate. I am able to reach a certain point but struggling to make it perfect. The animation is not that smooth and additionally, the image is not aligned properly. During the animation, you can see image elements not centered with other elements in the view. Here is my HTML and CSS3 code so far.
.hi {
width: 910px;
height: 340px;
background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
position: relative;
-webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) infinite;
}
#-webkit-keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 100%; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: 100%; }
}
<div class="hi">
</div>
Fiddle: http://jsfiddle.net/bf5ckdv9/
I have added a background dimension style, and rearranged some of your properties
the result is almost ok; but your sprite grid seems to be out of order
.hi {
width: 910px;
height: 340px;
background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
position: relative;
animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite;
border: solid 1px blue;
background-size: 500% 500%;
background-repeat: no-repeat;
}
#keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 125%; }
}
#keyframes playh {
0% { background-position-x: 0%; }
100% { background-position-x: 125%; }
}
<div class="hi">
</div>
I've got this code working for changing background conteniosly in CSS and HTML:
animation: animated 10s linear infinite;
#keyframes animated {
0% { background-position: 0px bottom; }
25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }
75% { background-position: -600px bottom; }
}
Currently the background moves in an animation, but I would like to have the background switch position in one go - so it seems the image changes instead of moving.
Is that possible with only CSS?
What you need to do is, instead of
25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }
You do it like:
25.01%, 50% { background-position: -200px bottom; }
50.01%, 75% { background-position: -400px bottom; }
Thus you will almost eliminate the time needed for transition from one keyframe to another.
Demo: jsFiddle
*{ padding:0; margin:0; }
#bg{ width:100%; height:100vh;
background: url('//www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg') no-repeat;
animation: slideshow 5s infinite;
}
#keyframes slideshow {
0%, 25% { background-position: 0px bottom; }
25.01%, 50% { background-position: -200px bottom; }
50.01%, 75% { background-position: -400px bottom; }
75.01%, 100% { background-position: -600px bottom; }
}
<div id="bg"></div>
Use the following:
animation: animated 10s steps(4) linear infinite;
#keyframes animated {
from {
background-position: 0px 0px; }
to {
background-position: 600px 0px; }
}
You can remove linear in your CSS
animation: animated 10s infinite;
#keyframes animated {
0% { background-position: 0px bottom; }
25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }
75% { background-position: -600px bottom; }
}
You need to use some JS with setTimeout of 10000ms to switch background-position
$(document).ready(function () {
var koef = 1;
setInterval(function () {
$('#image').css({'background-position-x': 600 * -koef});
koef = !koef;
}, 1000);
});
#image {
width: 200px;
height: 200px;
background: url(http://lorempixel.com/g/1000/200/) no-repeat 0 bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>
All I want to have a background scrolling effect from bottom to top ,but I dont know how to do so. I have tried it using CSS ,but the problem arises here is it scroll in both direction i.e bottom to top and top to bottom.
* {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 100vh;
animation: change 2s infinite ease-in both;
background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#keyframes change {
0%, 100% {
background-position: 0% 5%;
}
5% {
background-position: 0% 10%
}
10% {
background-position: 0% 15%
}
15% {
background-position: 0% 20%
}
20% {
background-position: 0% 25%
}
25% {
background-position: 0% 30%;
}
30% {
background-position: 0% 35%
}
35% {
background-position: 0% 40%
}
40% {
background-position: 0% 45%
}
45% {
background-position: 0% 50%
}
}
<div>
<h1> This is animating background ...</h1>
</div>
You can achieve that by just using the to and from attributes for the keyframes change. The effect is kind of weird, because the background top and bottom do not fit together...
* {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 100vh;
animation: change 3s linear infinite;
background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg);
background-size: cover;
background-repeat: repeat-y;
background-position: 0 0;
}
#keyframes change {
from {
background-position: 0 100vh;
}
to {
background-position: 0 0;
}
}
<div>
<h1> This is animating background ...</h1>
</div>