I am trying to color a progress bar depending on the value.
progress[value]::-webkit-progress-value {
position: relative;
background-color: rgba(0, attr(value) ,0,1);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
Looks like attr(value) doesn't appear to work - is there a way to inject value in there? Using chrome
If you use pseudo element before to display your progress?
Maybe this could work?
progress[value]::-webkit-progress-value {
&:before{
content: [attr-data];
display: block;
position: relative;
background-color: rgba(0, attr(value) ,0,1);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
}
Related
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.
I'm trying to create a repeated background existing out of two parts. Each part is a gradient and while the one moves up, the other moves down.
The best I got is this:
html {
background: black;
color: #4c4c4c;
}
body {
margin: 30vh auto;
max-width: 80vw;
}
.wave {
background: none;
height: 1rem;
width: 50%;
position: absolute;
z-index: 2;
animation: move 700ms 0ms steps(2) infinite both;
}
.color::after,
.color::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 100%;
top: 0;
}
.color {
background-image: linear-gradient(#fe0000 50%, #6531ff 0 100%);
}
.color::after {
background: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
}
.wave,
.color::after,
.color::before {
background-size: 5rem 1rem;
background-repeat: repeat-x;
}
#keyframes move {
0% {
margin-top: -3rem;
}
100% {
margin-top: -3.25rem;
}
}
<div class="color wave"></div>
I get why this doesn't work, but not sure how to proceed.
Since it is difficult to describe, here is an image of what I'm looking for:
At first (position 1), all odd blocks are higher than the even blocks. After the first animation, it's the other way around (position 2) and so on.
Maybe like below:
.box {
height:100px;
background:linear-gradient(red,blue,yellow,red) 0 0/100% 200%;
animation:y 2s linear infinite;
}
.box::after {
content:"";
display:block;
height:100%;
background:linear-gradient(green,lightblue,pink,green) 0 0/100% 200%;
animation:inherit;
animation-direction: reverse;
-webkit-mask:linear-gradient(90deg,#fff 50%,transparent 0) 0 0/20% 100%;
}
#keyframes y {
to {
background-position:0 -200%;
}
}
<div class="box"></div>
UPDATE: This is an interesting problem. I'm surprised to find that I don't have an obvious or particularly elegant solution to having a gradient running vertically while repeating with horizontal gaps.
Far more elusive than I initially expected.
Best I could come up with is to put one of the gradients in a pseudo element and apply a mask-image. This won't work in IE, but it appears to be supported everywhere else.
See updated demo below.
If I understand what you're trying to do, I think you could accomplish it by animating the background positions:
.demo {
height: 200px;
background-image:
linear-gradient(#f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%);
animation: move 0.7s infinite alternate;
background-size: 3rem;
position: relative;
}
.demo::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(#042a2b, transparent);
/* This is the magic part: using a horizontal repeating-linear-gradient
to mask out "columns", allowing the container's background gradient to
show through */
-webkit-mask-image: repeating-linear-gradient(to right, black 0 3rem, transparent 3rem 6rem);
background-size: 3rem;
/* run the same animation in reverse to animate up instead of down */
animation: move 0.7s infinite alternate-reverse;
}
#keyframes move {
from {
background-position: 0 0;
}
to {
background-position:
0 200px;
}
}
<div class="demo"></div>
It's difficult to infer exactly what you're trying to do, but here's another sample (very similar to #ray hatfield's answer) that will move the first background down while the second background moves up:
.sample {
width: 250px;
height: 50px;
position: relative;
background-image: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
animation: move 1s infinite linear;
}
#keyframes move {
0%, 100% {
background-position: 0 -75px, 0 0;
}
50% {
background-position: 0 0, 0 -75px;
}
}
<div class="sample"></div>
My CSS and a snippet for demonstration:
/*compatibility*/
#-moz-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
#-webkit-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
#-ms-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
#-o-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
.rainbow {
padding:0 0 3px 0 !important;
border-bottom: 1px solid transparent;
border-radius: 10px;
/*added a colourstop here, without the third colourstop you get a hard edge*/
background: linear-gradient(#181717, #181717),
linear-gradient(60deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-origin: border-box;
background-clip: content-box, border-box;
animation-name: rainbow;
animation-duration: 4s;
/*set animation to continue forever, and to move at a single rate instead of easing*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
https://codepen.io/jhendrix13/pen/zYrMZQz
Is there a way to further increase the gradient/blend between the colors?
I'm trying to get it similar to this snippet, which has a much smoother blend/transition between colors:
https://codepen.io/mike-schultz/pen/NgQvGO
But my knowledge of CSS is minimal, and I'm not sure how to get that result. I think it has something to do with the animation definition itself, but when I try to take the animation definition from the second snippet and put it in the first snippet the animation stops working and goes static.
If you use ::after you can achieve a better effect:
.box {
margin: 20px;
}
.text {
color: white;
padding: 10px 0;
text-align: center;
}
#-webkit-keyframes rainbow {
0% {
background-position: 500% 0%;
}
100% {
background-position: 0% 0%;
}
}
.rainbow {
border-radius: 6px;
background: #000;
}
.rainbow::after {
content: "";
display: block;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 5px;
width: 100%;
background: linear-gradient( 60deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400);
background-size: 500% 500%;
animation-name: rainbow;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
<div class="box rainbow">
<div class="text">
This is a box with a rainbow border.
</div>
</div>
Set it to display block so the width can be set to 100%, move most of the CSS you had in .rainbow over and set the background-size property, then use percent in the keyframes to loop round to the start (use 200% for this, if you use 100% it won't animate).
EDIT
I've just realised this didn't exactly answer your original question. For blending the colors more smoothly, you can increase the background-size of the element and background-position of the animation, then increase the duration, just tweak until it looks right.
I've edited my snippet to show an example.
I'm tryin to make a infinte animation but at some point it seems to hop back to the start.
Thats the code
h1 {
background: url(Pepesad.png) repeat-x;
width: 90%;
margin: 1em auto;
max-width: 600px;
height: 512px;
animation: flybirds 1s linear infinite;
}
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: 300px 0px
}
}
Some of the CSS rules you mentioned for h1 seems unnecessary for your purpose. Mentioning the width gives the animation very less space. Consider providing the h1 a container/ wrapper and set appropriate width for it.
h1 {
background: url(Pepesad.png) repeat-x;
height: 512px;
width: 5076px;
animation: flybirds 1s linear infinite;
}
Also in the keyframes you have mentioned the x-axis to 300px which cause the breaking effect during the animation. I suggest you update it
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: -100% 0px
}
}
Another alternative you could use is :
#keyframes flybirds {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1692px, 0, 0);
}
}
Note: the reason why I suggest to use an additional at all, rather than animating background-position on h1, is so that we can use an animated transform to do the movement, which is much more performant.
I am trying to use a CSS animation to create a preloader animation for my gallery. When I am applying the CSS code below it looks ok in Chrome, Firefox, but it doesn't look nice in Internet Explorer and Safari. For your reference here is the original picture - for a demo see this fiddle.
I dug through most articles related to this topic and applied the fixes that seem to make sense (see comments in code), but alas it still looks like crap.
Do any of you CSS wizards have an solution for this issue?
div.preloader-container {
background-image: url('img/preloader.png') no-repeat !important;
background-size: 20px 20px !important;
height: 20px !important;
width: 20px !important;
position: relative !important;
top: 50% !important;
display: block;
margin-left: auto;
margin-right: auto;
/* Attempt to fix it 1 */
-webkit-backface-visibility: hidden !important;
-ms-backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
backface-visibility: hidden !important;
/* Attempt to fix it 2 */
outline: 1px solid transparent !important;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% {
-moz-transform:rotate(360deg);
}
}
#-webkit-keyframes spin { 100% {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotate(360deg);
}
}
#keyframes spin { 100% {
transform:rotate(360deg);
}
}
Ok my in very specific instance the problem was that re-sizing a 200px image to 20px was handled badly by these browser. As soon as I decreased the size of the png to 40px and resize to 20px with the backgroud-size attribute it works like a charm. Hope that helps other people with the same issue.
Here is a demo fiddle with the solved issue and here is one with the issue still happening.
background-size: 20px 20px;