Is it possible to create a fade-in fade-out effect in pure css, each running from left to right (cf. gif)?
I implemented the fade-in hover effect with the following code:
input[type='submit'] {
background: linear-gradient(to left, var(--btn-prim-bg-color) 50%, var(--color-primary) 50%) right;
background-size: 200%;
transition: .5s;
color: white;
text-transform: uppercase;
border: none;
}
input[type="submit"]:hover {
background-position: left;
color: var(--color-text);
}
But I have problems with the fade-out on mouse leave, it runs from right to left afterwards. but it should run from left to right again (cf. gif)
We can take advantage of the fact that some properties can be transitioned and others can happen instantly.
In this snippet the background-color of the input is changed instantly on hover, its background image which consists of a blue part and a yellow part initially is changed to a transparent part and a yellow part on hover.
The only property that is transitioned is the background sizes of the two linear gradients.
input {
background-color: yellow;
background-image: linear-gradient(cornflowerblue, cornflowerblue), linear-gradient(yellow, yellow);
background-size: 100% 100%, 0% 100%;
background-position: left top, left top;
background-repeat: no-repeat;
transition: background-size 5s linear;
border: none;
}
input:hover {
background-color: cornflowerblue;
background-image: linear-gradient(transparent, transparent), linear-gradient(yellow, yellow);
background-size: 0% 100%, 100% 100%;
}
<input>
Related
I created a bar (you can see in the snippet below) with infinite diagonal stripes using css' repeating-linear-gradient and i tried to create an animation, it should roll the stripes in horizontal direction.
Almost got it. The problem is in the start and the end of the background, the end of the stripes pattern don't match with the start, creating a broken pattern.
Is there a way to make css repeat the pattern outside of the drawing area, or other hack that could fix this problem?
.progress-bar {
width: 100px;
height: 20px;
background: repeating-linear-gradient(
135deg,
black, black 10px,
transparent 10px, transparent 20px);
animation: pb-animation 3s linear infinite;
}
#keyframes pb-animation {
0% { background-position: 0px }
100% { background-position: 100px }
}
<div class="progress-bar">
</div>
PS:
I know if I put a specific width in the div I will fix it, but this is not helps because this pattern should be used on generic loading bars (the width and height will be determined by the context of use).
It's only a matter of finding the right angle and number :D
It work with below number of transparent.
.progress-bar {
width: 100px;
height: 20px;
background: repeating-linear-gradient(
135deg,
black, black 10px,
transparent 10px, transparent 14.1px);
animation: pb-animation 3s linear infinite;
}
#keyframes pb-animation {
0% { background-position: 0px }
100% { background-position: 100px }
}
<div class="progress-bar">
</div>
I've implemented a hover effect on a h1 element (see code and pen below), but the effect is behaving strangely on mouse out and sort of flickering before going back to it's original state.
Any ideas how to make it transition back to it's original color as smoothly as it fades in on hover?
Thanks in advance.
https://codepen.io/lobodemon/pen/YOXKNJ
h1 {
transition: 0.5s;
}
h1:hover {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
color:transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0%, 100% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
}
#-moz-keyframes Gradient {
0%, 100% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
}
#keyframes Gradient {
0%, 100% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
}
<h1>The Title</h1>
The issue is that you are trying to combine an animation with transtion which will not work like you expect. By adding a transtion you will not make the animation go smooth. In other words, you cannot add transtion to animation.
Since you made the duration of the animation to be 15s on hover, I don't think the infinite is needed in this case because no one will keep hovering more than 15s, so you can change this into a transition and it will be smooth.
I have added the black color to the gradient to have our initial state then with a transition we can do half the initial animation and at the end you will have a 7s duration which is somehow enough for a hover effect:
h1 {
transition: 7s;
background:
linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB,#000);
background-size: 400% 400%;
color:transparent;
-webkit-background-clip: text;
background-clip: text;
background-position: 0 0;
}
h1:hover {
background-position: 100% 50%;
}
<h1>The Title</h1>
When you are working with transition, you need to set initial state of element properties that you are going to change.
h1 {
background: black;
-webkit-background-clip: text;
background-clip: text;
}
I also found intresting example with same effect as yours.
https://codepen.io/anthony-liddle/pen/uFoxA
How can i let the text color changing from black to red with a css transition effect (e.g. ease-out) from bottom to top for a specific height in percent?
I got a value - let's say 50%. So now i want to change the text color of my example text: example from black to red with a css transition effect. But the transition effect should start at the bottom and then go ahead to top (and not from left to right as many examples demonstrate it). In the end the text "example" should be half colored with black - from bottom to the middle of the test (50%) and half colored with red - from the middle of the text to top (100%).
There are many methods to make the effect, I recommend for a smoother transition, create in the background a gradient with the colors you want to use and move the background to a position where only the colors you want are visible.
h1{
font-size: 4em;
text-align: center;
color: transparent;
background-position-y: -0%;
background-image: linear-gradient( black, red, white, green );
-webkit-background-clip: text;
-moz-background-clip: text;
transition: background 1400ms ease;
background-size: auto 400%;
}
h1.deg1{
background-position-y: -100%;
}
h1.deg2{
background-position-y: -200%;
}
h1.deg3{
background-position-y: -300%;
}
<h1 id="prueba"> Hola Mundo</h1>
<button onclick="document.getElementById('prueba').className='deg1'"> Cambiar 1 </button>
<button onclick="document.getElementById('prueba').className='deg2'"> Cambiar 2 </button>
<button onclick="document.getElementById('prueba').className='deg3'"> Cambiar 2 </button>
Hey #Opa114 please take a look at my codepen to understand how I achieved this effect https://codepen.io/akinhwan/pen/JvmJpO
a {
font: 300 42px/1.5 "Helvetica Neue", sans-serif;
margin-left: 80px;
color: $main-color;
text-decoration: none;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(
0deg,
$secondary-color,
$secondary-color 50%,
$main-color 50%);
background-size: 100% 200%;
background-position: 0% 0%;
}
a:hover {
transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1);
background-position: 100% 100%;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
background-size and background-position are important here to control the effect
my page has three background colors that change depending on what a div displays (just a word actually).
The colors do change right now, but the transition is not smooth as expected. Colors just change brutally, without a transition operating.
Here is my CSS :
.gradient-low{
background: #ddd6f3;
background: -webkit-linear-gradient(to left, #faaca8 , #ddd6f3);
background: linear-gradient(to left, #faaca8 , #ddd6f3);
transition-duration: 0.4s;
}
.gradient-moderate{
background: #ff6e7f;
background: -webkit-linear-gradient(to left, #ff6e7f , #bfe9ff);
background: linear-gradient(to left, #ff6e7f , #bfe9ff);
transition-duration: 0.4s;
}
.gradient-high{
background: #EECDA3;
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3);
background: linear-gradient(to left, #EF629F , #EECDA3);
transition-duration: 0.4s;
}
Do you have any suggestions so the change of colour is operated gradually and smoothly ?
Using transition it is not possible, but we can use CSS animation and keyframe animation. Try this :
.gradient-high{
background: #EECDA3;
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3);
background: linear-gradient(to left, #EF629F , #EECDA3);
animation-name: drop;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 5s;
}
#keyframes drop {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(50);
}
}
Please check out the FIDDLE
Unfortunately you can't transition CSS gradients at present. You can, however, work around this to achieve a similar effect.
The CSS below moves the gradients to ::before pseudo-classes. Because these gradients are now from transparent to the secondary colour, the solid colour background transition on the classes themselves is visible in the background.
.gradient-low {
background: #ddd6f3;
transition: background 0.4s;
}
.gradient-low::before {
height: 100%;
width: 100%;
content: '';
position: absolute;
left: 0px;
top: 0px;
background: linear-gradient(to left, #faaca8 , rgba(0,0,0,0));
}
Full fiddle here:
https://jsfiddle.net/mstringfellow/zftzrobv/
I made a border transition for a div in CSS that basically has the border become visible in a clock-work manner.
Here it is
Hover over the gray rectangle to see it.
The code below just here since site asks me for it, please see link.
<div class="outerBox"></div>
However, as you can see in the pen, there is space between the edges of the gray rectangle and the border, and the ends don't meet up correctly.
Any ideas as to why this could be happening?
Update
Actually, found the solution.
I discovered that the issue had to do with the way the width of the border was changing the div element's box-size.
Basically, making the border 2px was adding 2px of width (on each side I believe) to the div element and was thus causing the space and un-met ends.
The solution was to add the declaration
box-sizing: border-box;
to the ::before and ::after pseudo elements (and just to be safe I added it to the div element) and then the width of the div element was no longer affected by the border width.
If you click on the link in my question, you'll see that the border now encloses the rectangle nicely.
To see the previous state, just comment out the box-sizing: border-box; declaration instances.
One even easier solution with multiple backgrounds:
* {
box-sizing: border-box;
}
body {
background: silver;
}
.box {
background-color: white;
height: 10em;
margin: 2em auto;
width: 10em;
}
.box:hover {
animation: border 1s linear forwards;
background-image: linear-gradient(to left, red, red), linear-gradient(to left, red, red), linear-gradient(to left, red, red), linear-gradient(to left, red, red);
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
#keyframes border {
0% {
background-size: 0% 4px, 4px 0%, 0% 4px, 4px 0%;
}
25% {
background-size: 100% 4px, 4px 0%, 0% 4px, 4px 0%;
}
50% {
background-size: 100% 4px, 4px 100%, 0% 4px, 4px 0%;
}
75% {
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 0%;
}
100% {
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
}
}
<div class="box"></div>