I want to create a shine loading animation which will appear on multiple elements with different background colors.
Currently, I'm using background-image gradient and I'm animating the background-position using vw units, but it's not scalable, my elements will have different lengths.
Is there a way I can animate background-image with percentage units?
The animation created
body {
background: black;
}
header {
width: 100%;
height: 50px;
background-color: rebeccapurple;
background-image: linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,0.3) 50%,
transparent 100%
);
background-repeat: no-repeat;
background-position: -100vw;
animation: shine 2s infinite;
}
#keyframes shine {
0% {
background-position: -100vw;
}
100% {
background-position: 100vw;
}
}
<header></header>
An idea is to make the size of the gradient to be 3 times bigger than the container and color the middle part of it then you slide it from left to right:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background:
linear-gradient(90deg,#0000 33%,rgba(255,255,255,0.3) 50%,#0000 66%)
rebeccapurple;
background-size:300% 100%;
animation: shine 2s infinite;
}
#keyframes shine {
0% {
background-position: right;
}
/*100% {
background-position: left; it's the default value, no need to define it
}*/
}
<div class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
Another alternative for a different animation:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background:
repeating-linear-gradient(90deg,#0000 0,rgba(255,255,255,0.3) 25%,#0000 50%)
rebeccapurple;
background-size:200% 100%;
animation: shine 1s infinite linear;
}
#keyframes shine {
0% {
background-position: right;
}
}
<div class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
Related question: Using percentage values with background-position on a linear-gradient
Related
So basically, I am trying to create a progress bar. In this example, I will just change the colors I was using to red, green and blue instead since that's obviously easier to understand than a load of hex values. Effectively, what I am going for is for the progress bar to have this RGB gradient background that gives the impression the gradient is moving from left to right, to signify that there is still activity (i.e. that the site hasn't frozen). I've tried a few things, starting with just setting background: linear-gradient(120deg, red, green, blue) and animating the background-position CSS property to simulate the gradient moving. However, once at the end of the animation, the progress bar jumped from being mostly blue (i.e. the end of the gradient), right back to green...I then tried manually-reflecting the gradient in the form rgbgr - i.e. background: linear-gradient(120deg, red, green, blue, green, red) and, while this looks better, there is still jumpiness. Finally, I tried using the repeating-linear-gradient CSS function - i.e. background: repeating-linear-gradient(120deg, red, green, blue, green, red). This is the closest to what I'm aiming for, but in the example, you can see the gradient colors 'jumping', rather than animating smoothly
html, body{
height: 100%;
background: #222;
overflow: hidden;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
*{
color: white;
font-family: 'Tahoma', sans-serif;
}
#wrapper {
height: 50px;
width: 400px;
position: relative;
background: #131313;
}
p{
text-align: center;
position: absolute;
width: 100%;
}
#bar {
background: repeating-linear-gradient(120deg, red,green,blue, green, red);
background-repeat:repeat-x;
height: 100%;
position: absolute;
background-size: 400% 100%;
-webkit-animation: AnimationName 3s linear infinite;
-moz-animation: AnimationName 3s linear infinite;
animation: AnimationName 3s linear infinite;
}
#-webkit-keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-moz-keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
<div id="wrapper">
<div id="bar" style="width: 50%"></div>
<p>Downloading 5 of 10</p>
</div>
I've seen this effect on many sites before, so I assume it's possible in CSS. If anyone can point me in the right direction, I'd appreciate it. Thanks!
You can do it like below and it will work with any angle you want:
body {
background: #222;
}
.wrapper {
--d:100px;
--angle:120deg;
--sinus:0.866; /* = sinus(angle) */
height: 50px;
width: 400px;
position: relative;
z-index:0;
background: #131313;
text-align: center;
line-height:50px;
color: white;
margin:5px;
}
.wrapper::before {
content:"";
height: 100%;
left:0;
width:var(--w);
position: absolute;
z-index:-1;
background: repeating-linear-gradient(var(--angle), red, green, blue, green, red var(--d));
background-size: calc(var(--d)/var(--sinus)) 100%;
animation: AnimationName 2s linear infinite reverse;
}
#keyframes AnimationName {
0% {
background-position: calc(var(--d)/var(--sinus)) 0;
}
}
<div class="wrapper" style="--w:50%;">
Downloading 5 of 10
</div>
<div class="wrapper" style="--w:70%;--d:200px;--angle:45deg;--sinus:0.707">
Downloading 5 of 10
</div>
<div class="wrapper" style="--w:80%;--d:50px;--angle:-30deg;--sinus:0.5">
Downloading 5 of 10
</div>
You need to run the animation a bit longer before looping back.
#keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:-33% 50%} /* instead of 0% 50% */
}
I also changed the gradient angle to 90deg because the initial value makes the start and end of the gradient not matching very well
/* instead of 120deg */
background: repeating-linear-gradient(90deg, red,green,blue, green, red);
html, body{
height: 100%;
background: #222;
overflow: hidden;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
*{
color: white;
font-family: 'Tahoma', sans-serif;
}
#wrapper {
height: 50px;
width: 400px;
position: relative;
background: #131313;
}
p{
text-align: center;
position: absolute;
width: 100%;
}
#bar {
background: repeating-linear-gradient(90deg, red,green,blue, green, red);
background-repeat:repeat-x;
height: 100%;
position: absolute;
background-size: 400% 100%;
animation: AnimationName 3s linear infinite;
}
#keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:-33% 50%}
}
<div id="wrapper">
<div id="bar" style="width: 50%"></div>
<p>Downloading 5 of 10</p>
</div>
I want to create a square white box with png image in it. I want png to follow background while the colour of box doesn't affect it.
Here is the sample of the output that I want:
As for now, the white background color couldn't work after I added background colour on div for image. I want the transparent space of png follow body background color.
jsfiddle
I've attached snippet too. Can someone help me to look into it? Thanks in advance!
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
background-color:white;
}
.title {
margin-top: auto;
width: auto;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
-webkit-text-fill-color: transparent;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
You need to consider mask here:
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
min-height:100vh;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
}
.title {
margin-top: auto;
-webkit-mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
mask-composite:exclude;
background: #fff;
}
.title img {
visibility:hidden;
}
<div class="wrapper">
<div class="title">
<img src="https://i.ibb.co/Zcvccd9/print-v1.png" >
</div>
</div>
Here is the solution:
Step 1: Set position: absolute
Step 2: Set the width of the .title
Step 3: add a transparent color in between other colors in the linear background.
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
background-color:white;
}
.title {
margin-top: auto;
position: absolute;
width: 97vw;
border: 1px solid black;
background: linear-gradient(-45deg, #ee7752, #ffffff, #3456ab00, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
I am developing an interactive touchscreen at my work which has four tiles on the main screen that look much like the Windows logo. At the moment they are different static colours and they don't look 'alive' and interactive. I want to make them glow or pulsate slightly in random areas and intervals. I thought about creating a white radial gradient and moving it randomly around the outside of each tile so the tile gradient changed, however, I am not sure how to code this in CSS.
I have tried to adapt some copied code that uses radial gradient animations that cycles through the complete hue gradient. The problem with this is I don't want to change the colours because they form the background for text (which can mess with the contrast). The changes can also be rather dramatic, going from a dark colour to very bright, which again messes with the text contrast.
I have already tried a linear gradient but am not happy with it as it is rather predictable and boring (the same gradient going back and forth).
What I am after ideally would be something like this:
Here is a code snippet of what is currently running:
body,html{
margin:0;
padding:0;
height:100%;
}
.box{
height:100%;
width:100%;
}
.gradDynamic{
position:relative;
}
.gradDynamic:after, .gradDynamic:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
z-index:-1;
}
.gradDynamic:after{
background:radial-gradient(circle,red,transparent);
background-size:400%;
animation:colorSpin 30s linear infinite;
}
.gradDynamic:before{
background-color:yellow;
}
#keyframes colorSpin{
25%{background-position:0 100%}
50%{background-position:100% 100%}
75%{background-position:100% 0}
100%{filter:hue-rotate(360deg)}
}
<div class="box gradDynamic"></div>
I have achieved the animated background with linear gradient background. Lets try this example and comment for further assistance.
.gradient {
height: 400px;
width: 100%;
background: linear-gradient(180deg, #1846c4, #98b2ff, #1846c4);
background-size: 200% 200%;
-webkit-animation: Animation 8s ease infinite;
-moz-animation: Animation 8s ease infinite;
animation: Animation 8s ease infinite;
}
#-webkit-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#-moz-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
<div class="gradient"></div>
Updated fiddle.
#demo {
width: 100%;
height: 300px;
position: relative;
background: linear-gradient(to bottom, #3bd6f7 0%, #1539b9 100%);
z-index: 2;
}
#demo:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: -1;
}
#demo::after {
background-size: 400%;
background-size: 400%;
animation: colorSpin 40s linear infinite;
background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.1), transparent);
}
#demo::after {
background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.1), transparent);
}
#keyframes colorSpin {
25% {
background-position: 0 100%
}
50% {
background-position: 100% 100%
}
75% {
background-position: 100% 0
}
100% {
filter: hue-rotate(360deg)
}
}
#demo::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #1539b9 0%, #1539b9 100%);
opacity: 0;
animation: bg 2800ms ease-in-out 3s infinite alternate-reverse;
z-index: -1;
}
#keyframes bg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="demo">Demo</div>
I am looking for a way to overwrite the background color from the top to bottom. More specifically, I would like it to be filled from top to bottom. Currently I have managed to produce a "faded" animation.
This is what I have now:
.page-dark {
background: #003850;
background-color: #003850;
color: white;
-o-animation: fadeIt 3s linear;
animation: fadeIt 3s linear;
}
#-o-keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
#keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
You can create a background with two colors using linear-gradient(). Set the background height to 200% using background-size, and hide one of the colors using background-position. Now animate the background position to show the other color:
.page-dark {
height: 90vh;
background: linear-gradient(to bottom, #003850 50%, #ff711b 50%);
background-size: 100% 200%;
background-position: 0 100%;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-position: 0 0 }
}
<div class="page-dark"></div>
Another option is to set the color you want to hide as the background, animation background-position to show the 2nd background (which we create using linear-gradient()):
.page-dark {
height: 90vh;
background: #ff711b linear-gradient(to bottom, #003850 0, #003850 100%) no-repeat;
background-size: 100% 0;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-size: 100% 100%; }
}
<div class="page-dark"></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>