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>
Related
I have a text that is black and on hover the gradient moves from left to right. But after the hover, the gradient moves back to left. I want it to move on the rigth. How could i achieve that?
This is the example code that i currently use
.gradlr {
color: #0000;
background: linear-gradient(90deg, #314199, #54c0c7 50%, #000 0)
var(--_p, 100%) / 200% no-repeat;
-webkit-background-clip: text;
background-clip: text;
transition: 0.4s ease-out;
}
.gradlr:hover {
--_p: 0%;
}
<h1 class="gradlr">Test</h1>
This can't be done using transitions, as they can only morph between 2 simple states. To achieve this continuous effect, you would need to use CSS animations.
You can define a keyframe animation which includes at 0% your starting point, 50% your end point, and then at 100% an overshoot to move the gradient further left to reach the starting point again. At that point the animation will restart at 0% and it will look like an infinite animation to the left.
Here's an article to get started: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Is this what you want ?
you can use to left as first param to linear-gradient :
.gradlr {
color: #0000;
background: linear-gradient(to left, #314199, #54c0c7 50%, #000 0)
var(--_p, 100%) / 200% no-repeat;
-webkit-background-clip: text;
background-clip: text;
transition: 0.4s ease-out;
}
.gradlr:hover {
--_p: 0%;
}
<h1 class="gradlr">Test</h1>
I updated in the hover, please check and tell me if that what you want ?
.gradlr {
color: #0000;
background: linear-gradient(90deg, #314199, #54c0c7 50%, #000 0)
var(--_p, 100%) / 200% no-repeat;
-webkit-background-clip: text;
background-clip: text;
transition: 0.4s ease-out;
}
.gradlr:hover {
--_p: 85%;
}
<h1 class="gradlr">Test</h1>
I am trying to make some RGB text, and that works, however when I am trying to make a ::selection then it will hide the text, and will for some reason take the background color of the text. I have tried anything I can think of, for now, I am making it for chrome and will later work on firefox.
Research
In my research, I have found that you do not need to use a selector like .rgb. While looking into some documentation/examples, I have encountered multiple weird things, like when I was using .rgb::selection I could not higlight/select ANY text on the screen.
when I looked into W3schools they simply use
::selection {
color: red;
background: yellow;
}
and it works. Ive asked my teachers, and my peers. What none of them understand is why the ::selection is taking the animate property. What I have thought is that when I use -webkit-background-clip that is what is making it not work properly. If this is the case then how can I make it so that it still takes it. When I read some more, I tryed to use !important, this was the closest that I got. It made the text white, but the color was still changing in the background. I've looked here to try to learn how i can use it properly, but i think I have used it correctly. I just cant seem to get the background color to stay one color.
This is what I have gotten so far.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Montserrat', sans-serif;
}
.rgb
{
position:fixed;
background: linear-gradient(to right, #008AFF, #00FFE7);
animation:animate 10s forwards infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
::selection !important{
background: red;
color: white;
}
#keyframes animate
{
0%, 100%
{
filter:hue-rotate(0deg);
}
50%
{
filter:hue-rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="rgb">Welcome to my webpage</h1>
</body>
</html>
I've looked all over this site for something or someone with this problem but it seems I'm a first.
To escape the filter' a somewhat hacky way of doing it might be to have a second copy of the heading which is placed over the original and is actually the element for which selection takes place.
Its text and background are transparent until there is a selection at which point the selection (only) becomes white and red respectively.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Montserrat', sans-serif;
}
.rgb {
position: fixed;
background: linear-gradient(to right, #008AFF, #00FFE7);
animation: animate 10s forwards infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.shadow {
color: transparent;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
}
.shadow::selection {
background: red;
color: white;
}
#keyframes animate {
0%,
100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
<h1 class="rgb">Welcome to my webpage</h1>
<h1 class="shadow">Welcome to my webpage</h1>
This question already has an answer here:
How can I achieve a text loading animation over multiple lines?
(1 answer)
Closed 1 year ago.
How to make a sweep to right animation on multi line text. I want it to animate first on top line and if it is finished then on second line. We can assume that we know how much lines have each text. This is how it works now, it animate as it is a single line text.
.green-hover {
background: linear-gradient(to right, green, green);
background-repeat: no-repeat;
background-size: 0 50%;
/* transition: background-size 1s 0s; */
}
.green-hover:hover {
animation: myanimation 1s;
}
#keyframes myanimation {
0% {
background-size: 0% 100%;
}
100% {
background-size: 100% 100%;
}
}
<p class="green-hover">130 W Union Street <br> Pasadena, TX 9999</p>
The display should be inline. Also you don't need to use animation. Just use a transition like this:
.green-hover {
display: inline;
background: linear-gradient(to right, green, green);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size 1s 0s;
}
.green-hover:hover {
background-size: 100% 100%;
}
<p class="green-hover">130 W Union Street <br> Pasadena, TX 9999</p>
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>
I put small images into a large image and use background-position to set the position of the small image in the large one.
When #nav_left_home is onhover, the background image position is changed from 0 32px to be 0 0.
#nav_left_home {
background-position: 0 32px;
background-image: url('../img/nav_left.png');
transition: background-image 0.5s ease-in-out;
}
#nav_left_home:hover {
background-position: 0 0;
}
With the above code, the red house would move up when onhover and the white house will appear under the red house and move up until replace the position.
But I only want to change the color of the image (no moving in position) as in the way color changes with transition.
The only way I know to achieve this is to slice your image as a "mask" and use CSS to transition between different background colors. By mask, I mean the color portion of your icon would be left transparent to form a kind of cutout that lays on top of a solid background color.
You need to show both images at the same time, and fade between the 2.
To get this, you need to set the alternate image in a pseudo element, initially transparent:
#nav_left_home {
background-position: 0 32px;
background-image: url('../img/nav_left.png');
transition: background-image 0.5s ease-in-out;
}
#nav_left_home:after {
content: "";
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-position: 0 0;
background-image: url('../img/nav_left.png');
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
#nav_left_home:hover:after {
opacity: 1;
}