I want to blink my bg image using css.
It should blink quickly and I have no idea how to do it.
I can only use HTML and CSS.
header {
width: 100%;
height: 100vh;
background-image : url('bg.jpg');
animation: blinkingBackground 2s infinite;
background-position: right bottom, left top;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Dosis', sans-serif;
}
I have also added
animation: blinkingBackground 2s infinite;
but it's not working.
#Ahmad's solution is good, but it doesn't fade in smoothly. So I made a code which makes the blinking smoother.
.html_bg {
background-image: url(https://cdn.arstechnica.net/wp-content/uploads/2020/09/macOSBigSur.jpg);
animation: blink 1.5s infinite;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_bg">
<!--Put your content here-->
</div>
I made the opacity change to zero at 50% so that the opacity can change back to 1 smoothly.
Do you need something like this?
.html_image {
background-image: url('https://i.picsum.photos/id/686/536/354.jpg?hmac=nQKjRmIoZtUkWvI-wNF8RFNW89VHuPIPT2muuPPL3QY');
height: 200px;
animation: blink 1s infinite;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_image">
</div>
Working Fiddle
Related
I am trying to create a slideshow as background but it does not work in Firefox. The image change but there is not the specified transition.
.main-page {
width: 100%;
height: 100vh;
animation: animate 15s ease-in-out infinite;
-webkit-animation: animate 15s ease-in-out infinite;
-moz-animation: animate 15s ease-in-out infinite;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
background-size: cover;
}
#keyframes animate {
0%,
100% {
background-image: url(/img/001.jpg);
}
50% {
background-image: url(/img/002.jpg);
}
}
Checking inspector and I can see that the following is active:
-webkit-animation: animate 15s ease-in-out infinite;
What do I do wrong?
Thanks.
It seems that FF and Chrome interpret animation between background images differently. Chrome continuously fading one out while fading the next one in (as with background color) but FF just shows one, then the other.
One way round this for the two image situation shown in the question is to put the background images on before and after pseudo elements and use CSS animations to fade them in and out using opacity which FF does treat as animatable.
Here's a simple example as demo:
.main-page {
width: 100%;
height: 100vh;
}
.main-page::before,
.main-page::after {
width: 100%;
height: 100%;
position: absolute;
content: '';
top: 0;
left: 0;
animation: animate 15s ease-in-out infinite;
-webkit-animation: animate 15s ease-in-out infinite;
-moz-animation: animate 15s ease-in-out infinite;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
background-size: cover;
}
.main-page::before {
background-image: url(https://picsum.photos/id/1015/200/300);
}
.main-page::after {
background-image: url(https://picsum.photos/id/1016/200/300);
animation-delay: 7.5s;
}
#keyframes animate {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="main-page"></div>
I've got a an image I'm using as a background that is animated in CSS, but it is push all of my content to the bottom of the page with plain white background. Does anyone know how I can get it to act more of an animated wallpaper so my content isn't pushed down?
#map {
height: 400px;
width: 400px;
margin: 0 auto;
}
.check {
text-align: center;
}
h3,
h2,
h1,
a {
text-align: center;
background-color: transparent;
}
#sky {
overflow: hidden;
}
#clouds {
width: 200%;
height: 1000px;
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
margin-left: 0%;
}
100% {
margin-left: -100%;
}
}
<div id="sky">
<div id="clouds"></div>
</div>
Move the animation to the background position. This way, it will animate behind whatever is on top of it. In this case, I've moved the background to the body, but you can use absolute/relative position as well.
By animating the margin, you push everything to one side, not just the background.
body {
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
background-position: 0%;
}
100% {
background-position: -100%;
}
}
Working example: https://jsbin.com/ruyemijasi/edit?html,css,js,output
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 want to infinite Scroll Background image animate. How can I set it just go upwards continuously, not come back down? still, it gives a jerk.
How it is possible? Please help anyone know it.
I have a link:
http://herinshah.com/wp/fortiflex/5-2/
CSS:
.et_pb_section.landing-page .et_pb_column_3_5 {
background-color: #f6eb00;
margin-right: 1%;
padding: 0 10px;
height: 100vh;
background-image: url(images/ragazzi-logo.png);
background-position: 0 0;
background-size: cover;
-webkit-animation: upward 15s linear infinite;
animation: upward 15s linear infinite;
border-right: 4px solid #000;
display: block;
background-repeat: repeat-y;
}
#-webkit-keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
#keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
You need to wrap a div inside a div. Here is the working fiddle for the same
HTML
<div class="main">
<div class="holder"></div>
</div>
CSS
*{
margin:0;
padding:0
}
.main {
height: 100vh;
overflow: hidden;
}
.holder {
height: 200vh;
-webkit-animation: upwards 2.5s linear infinite;
animation: upward 2.5s linear infinite;
background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png) center yellow;
background-size: 100% 50%;
}
#-webkit-keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
I felt so compelled to answer this because I've done something similar :before (pun intended) and your skipping animation was giving me cancer.
You're gonna need to mess around with the pseudo :after element and get the height right. This should get you started.
Also your image isn't cropped perfectly right, so fix that and you'll be good to go.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body onload="onloaded()">
<div class="foo_section">
<div class="foo_container">
<img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
</div>
</div>
</body>
</html>
.foo_section {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
}
.foo_container {
width: 100%;
position: relative;
animation: infiniteScrollBg 10s infinite linear;
}
.foo_container:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #f6eb00;
background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
background-size: 100% 20%;
}
.foo_image {
width: 100%;
}
#-webkit-keyframes infiniteScrollBg {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(-200%);
}
}
Codepen
I see you're using Elegant Themes too. <3 Divi builder
I suggest you to have two div tags with the same background. Then, animate the same div and play with positioning of the divs and animate to make it look continuously scrolling up.
.container{
width:600px;
height:400px;
background-color:yellow;
margin:0 auto;
position:relative;
overflow:hidden;
}
.bg{
width:100%;
height:400px;
background-repeat:no-repeat;
background-size:contain;
position:absolute;
bottom:0;
}
.bg.bg1{
transform: translate(0,0);
animation: upward 3s linear infinite;
}
.bg.bg2{
transform: translate(0,100%);
animation: upward2 3s linear infinite;
}
#keyframes upward {
to {
transform: translate(0,-100%);
}
from {
transform: translate(0, 0);
}
}
#keyframes upward2 {
to {
transform: translate(0,0);
}
from {
transform: translate(0,100%);
}
}
Here's how I would do it. my codepen.
My animation keeps disappearing after it completes its animation. I have followed the answers to other questions but it still doesn't help. My CSS is as follows:
.upvote-object {
width: 50px;
height: 62.5px;
background: url('/icons/upvote.png') left center no-repeat;
background-size: 50px 62.5px;
&.upvoted {
background: url('/icons/upvoted.png') left center no-repeat;
background-size: 50px 62.5px !important;
}
}
.ani-upvote {
background: url('/icons/upvote-sprite.png') left center no-repeat;
background-size: 1700px 62.5px;
animation: play 3s steps(34);
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
#keyframes play {
100% {
background-position: -1700px;
opacity: 1;
}
}
#-webkit-keyframes play {
100% {
background-position: -1700px;
opacity: 1;
}
}
I am calling it in my HTML like this:
<div class="upvote-object ani-upvote"></div>
Here's the problem: JSFiddle
UPDATE: Please also know that the animation must also stay on the last frame! (Green)
I got it working. But I’m not a CSS expert. So I’m sorry for not being able to explain why it works. Maybe you know why :)
.upvote-object {
width: 50px;
height: 62.5px;
background: url('http://sstaging-parts.herokuapp.com/icons/upvote.png') left center no-repeat;
background-size: 50px 62.5px;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
.ani-upvote {
background: url('http://staging-parts.herokuapp.com/icons/upvote-sprite.png') left center no-repeat;
background-size: 1700px 62.5px;
animation: play 2s steps(33); // changed the steps to 33
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
#keyframes play {
100% { background-position: -1650px; opacity: 1; }
}
#-webkit-keyframes play {
100% { background-position: -1650px; opacity: 1; } // Changed the position to -1650
}
UPDATE
I got it to work. I think it has to do with the sprite and the position where it stops the animation... if that makes any sense.