I am trying to create a pulsating circular background with smooth edges. For the circle with smooth edges I am using this CSS code:
background: radial-gradient(black, black, transparent, transparent);
Using my code below works well to animate the background-color. However, as soon as I replace the background-color with this radial-gradient background the animation jumps and is no longer smooth. The behavior is consistent over multiple Browsers. This is a minimal working example of the issue I am having:
.global {
background: lightskyblue;
}
.silver {
// background: radial-gradient(black, black, transparent, transparent);
animation: pulse 3s infinite;
}
#keyframes pulse {
0%,
100% {
// background-color: black;
background: radial-gradient(black, transparent, transparent, transparent);
}
50% {
// background-color: white;
background: radial-gradient(black, black, transparent, transparent);
}
}
<body class="global">
<img src="pngwave.png" alt="test" class="silver" />
</body>
I have found this Stackoverflow question which is similar but did not help me solve my problem.
You need to animate the background-size
.box {
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,black, transparent) center no-repeat;
animation:pulse 2s linear infinite alternate;
}
#keyframes pulse{
from {
background-size:50% 50%;
}
to {
background-size:100% 100%;
}
}
<div class="box"></div>
Related
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
How to Animate Gradients using CSS
(5 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Original close reason(s) were not resolved
How do I add an animation from plain color to background gradient color when hovered? Possibly when hovered from left to right?
I have this sample code but when hovered it is too instant when changing the colors.
I've tried using these references:
Use CSS3 transitions with gradient backgrounds
Animating Linear Gradient using CSS
But can't seem to figure out how to have an easiest approach for the hover. Other references say to add pseudo after element when hovered, but it seems a bit complicated when using it. Just want to use the hover element when animating the gradient text to it.
How to add a transition with these types of gradient text colors?
SAMPLE CODE:
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition:all 0.4s ease-in-out;
}
.hover-grad-txt:hover {
background-image:linear-gradient(to right, #01A5F8, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<span class="hover-grad-txt">Spear</span>
To animate it, instead of trying to animate the gradient, you could animate it's position.
Let's use a new linear gradient for you background.
It will go from the solid color, then it will be a gradient to your
first color from the gradient, then it will be a gradient to the second color of your gradient.
Something like this:
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
Then you adapt the size to only see the solid color:
background-size: 300% 100%;
And it's position:
background-position: top left;
All you need to do on hover is to move it:
background-position: top left 100%;
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 300% 100%;
background-position: top left;
transition:all 1s ease-in-out;
}
.hover-grad-txt:hover {
background-position: top left 100%;
}
<span class="hover-grad-txt">Spear</span>
Using new CSS properties, you could also do it like this:
<!DOCTYPE html>
<html>
<head>
<style>
#property --a {
syntax: '<color>';
inherits: false;
initial-value: #191335;
}
#property --b {
syntax: '<color>';
inherits: false;
initial-value: #191335;
}
.hover-grad-txt {
transition: --a 0.5s, --b 0.5s;
font-size: 100px;
text-align: center;
background-image: linear-gradient(to right, var(--a), var(--b));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hover-grad-txt:hover {
--a:#01A5F8;
--b: #01BFD8;
}
</style>
</head>
<body>
<span class="hover-grad-txt">Spear</span>
</body>
</html>
Keep in mind it only works in Chrome. Also, look at this question.
In addition to these answer, you could also utilize #keyframes to specify the animation code. Example here is setting pretty as the #keyframe and placing rgba value with Alpha set to 0 to ensure hovering occurs still. I place crimson color as to see the changes more obvios.
.hover-grad-txt {
background: linear-gradient(to right, crimson, #01A5F8, #01BFD8);
background-size: 200% 200%;
animation: pretty 2s ease-in-out infinite;
background-clip: text;
-webkit-background-clip: text;
transition: color 1s ease-in-out;
font-size: 100px;
}
.hover-grad-txt:hover {
color: rgba(0, 0, 0, 0);
}
#keyframes pretty {
0% {
background-position: left
}
50% {
background-position: right
}
100% {
background-position: left
}
}
<div class="hover-grad-txt">Spear</div>
I have the following HTML:
<div class="shimmer">
<img src="someImage">
<img src="otherImage">
</div>
CSS:
.shimmer img{
color: grey;
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
#keyframes shimmer {
100% {-webkit-mask-position:left}
}
A simple shimmer effect on the images.
When I open the HTML archive locally with Firefox or Chrome, it works perfectly fine. However, when I modify the internet webpage, the effect works fine in Chrome, but it doesn't appear in Firefox or mobile.
Help? I've been messing around with this for an hour and can't come up with the error. Thank you for your time.
It's because -webkit does not work in Firefox. But Firefox supports the mask property.
For example: You could declare all fallback properties.
div {
-webkit-mask: bla;
mask: bla;
}
Also see docs about the mask feature. At the bottom of the page you can see the supported browser.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
.shimmer img {
color: grey;
display: inline-block;
-webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
#keyframes shimmer {
0% {
-webkit-mask-position: 140% 140%;
mask-position: 140% 140%;
}
100% {
-webkit-mask-position: -20% -20%;
mask-position: -20% -20%;
}
}
<div class="shimmer">
<img src="https://i.stack.imgur.com/Sbpt3.jpg">
<img src="https://i.stack.imgur.com/Sbpt3.jpg">
</div>
(Tested in Chrome 95 and Firefox 94)
I also optimized your animation a bit by moving the mask outside for a smoother effect.
I am creating an interactive touchscreen display using a program called Intuiface and have created some background tiles/squares that I want to make look 'alive' by transitioning slowly between colours.
I have used a linear-gradient transition in CSS to do it but the problem is that the transition looks choppy. The program is running 12 visible tiles (it is a very large touchscreen).
I have tried using fewer colours and running on more powerful GPUs (I think it is CPU run anyway) but this hasn't helped.
body {
width: 100wh;
height: 90vh;
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%
}
}
At the moment the animations are noticeably choppy. I would like the transition to be much smoother. Does anyone know how I can achieve this?
Here is the code snippet.
body {
width: 100wh;
height: 90vh;
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%
}
}
<html>
<body>
</body>
</html>
Animating background-* properties can be resource intensive - you can try animating transform for relatively better performance - see demo below using traslate for the animation:
body {
margin: 0;
}
div {
height: 100vh;
overflow: hidden;
}
div:after {
content: '';
display: block;
width: 400vw;
height: 400vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
animation: gradient 15s ease infinite;
}
#keyframes gradient {
50% {
transform: translate(-300vw, -300vh);
}
}
<div></div>
Since your animation lasts 15 seconds, trying to run it at full 60fps would mean calculating 15*60 = 900 frames.
Since the difference between a frame and the next is quite small, you can make the CPU work quite less asking for a stepped animation, for instance with steps(75)
It could be also good to set slight delays between animations, so that they don't execute at the same time
body {
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s infinite steps(75);
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<html>
<body>
</body>
</html>
So I am using only css to animate a stripped progress bar on my file upload form.
The thing that when the file is successfully uploaded and the upload is finished, (progress bar reach 100%) the animation won't stop! The strips keep moving as if the file is still uploading. Can please anyone show me how to fix this little issue?
My CSS code
.ajax-file-upload-bar {
background-color: #0ba1b5;
width: 0;
height: 30px;
border-radius: 3px;
color:#FFFFFF;
font-family: calibri;
background-image: linear-gradient(
-45deg,
rgba(255,255,255,0.25) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0.25) 75%,
transparent 75%,
transparent
);
background-size: 40px 40px;
display: block;
height: 100%;
width: 100%;
animation: anim_stripes 1s linear infinite;
-webkit-animation: anim_stripes 1s linear infinite;
}
#keyframes anim_stripes {
from {
background-position: 0 0;
}
to {
background-position: 40px 40px;
}
}
You can stop the animation after downloading the file add class .paused
.ajax-file-upload-bar.paused {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
UPD_
JavaScript:
var reader = new FileReader();
reader.onload = function(e) {
var file = e.target.result;
$('.ajax-file-upload-bar').addClass('paused);
};
I'm a bit of a newbie to CSS3 animations, but I've looked everywhere, and I can't find a solution to this problem. I have a JSP page that I want the background to slowly fade from green to blue, and then slowly fade the opposite way and repeat this process infinitely.
I currently have it go from green to blue smoothly, but then it jerks back to blue instantly. Is there a way to play two animations from green to blue, then blue to green and repeat infinitely?
Here's the CSS code I have now:
#keyframes changeColorGreenToBlue {
from { background-color: rgb(146,213,142);}
to {background-color: rgb(133,184,222);}
}
#keyframes changeColorBlueToGreen {
from {background-color: rgb(133,184,222);}
to { background-color: rgb(146,213,142);}
}
.jumbotron {
height: 100%;
width: 100%;
background-color: green;
animation: changeColorGreenToBlue ease;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: changeColorBlueToGreen;
animation-iteration-count: infinite;
animation-duration: 4s;
background-size: cover;
background-repeat: repeat-y;
margin-bottom:1px;
}
It's a little messy because I was just trying everything to get it working. Sorry about that!
Rather than two keyframe animations, you want one that changes the background color twice (once at 50%, and back at 100%), like this:
#keyframes changeColor {
0% {
background-color: rgb(146,213,142);
}
50% {
background-color: rgb(133,184,222);
}
100% {
background-color: rgb(146,213,142);
}
}
See my codepen for example in action.