I've been looking for a way to make this work and I can't quite find what I want at this point.
I have this text that I want to highlight, and I would like to animate that to go from left to right. As of now, I've managed to make the highlight appear after a set amount of time, but without the left-to-right effect.
Here's what it looks like right now for reference :
And this is the css I used to make this happen :
#keyframes highlight {
0% {
background: none;
}
100% {
background: linear-gradient(to top, $light-purple 50%, transparent 50%);
}
}
h2 {
display: inline;
animation-name: highlight;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
I know this is a very rookie question, but I honestly can't find a way to do it properly, considering what I already have... I would appreciate it if someone could help!
Thanks in advance
I found a solution inspired by this article :
#keyframes highlight {
from {
background-position: 0;
}
to {
background-position: -100%;
}
}
h2 {
animation-name: highlight;
animation-duration: 0.75s;
animation-fill-mode: forwards;
background-size: 200%;
background-image: linear-gradient(to right, white 50%, transparent 50%),
linear-gradient(transparent 50%, purple 50%);
}
<h2>Here is an example text that will have the highlight</h2>
Related
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
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'm attempting to use CSS3 (gradients and animations) to make an animation similar to the iphone slide to unlock gradient. However, for some reason, the background-position only works when I use static pixel numbers and not when I use percentages. Ideally, I'd be able to apply this class to any element, and have the animation work, without needing to code for specific widths. Can somebody point me in the right direction?
JSFiddle:
https://jsfiddle.net/ekLamtbL/
.slideToUnlock {
background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
-webkit-animation: slidetounlock 5s infinite;
animation: slidetounlock 5s infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
}
#-webkit-keyframes slidetounlock {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
Added your code
background-size: 250% 250%;
Example
.slideToUnlock {
background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
-webkit-animation: slidetounlock 5s infinite;
animation: slidetounlock 5s infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
background-size: 250% 250%;
}
https://jsfiddle.net/ekLamtbL/2/
Article on MDN explains it well
tldr:
To make a use of percentage background-position your background's size should not equal to 100% of the dimension you want to position. N% position means N% of the background is mapped to N% of the element. Since gradient is automatically has size of 100%x100% setting background-position seem to have no effect unless you set background-size to some value like 200% for example
I have made a CSS animation that will animate the text give a shine effect to it. The effect currently only works with horizontal. I was wondering is there a way that I could change the direction of the animation to make it look like a realistic diagonal shine?
Here is my current code:
h1 {
font-family: 'BebasRegular', sans-serif;
font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;
background: #E9AB17 -webkit-gradient(linear, left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 155px;
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes shine
{
0%
{
background-position: top left;
}
28%,100%
{
background-position: top right;
}
}
Try this:
#keyframes shine {
0% {
transform: translatex(0px) translatey(0px)
}
100% {
transform: translatex(100px) translatey(100px);
}
}
jsFiddle
MDN translate documentation
You can just change top to bottom in the ending position:
#-webkit-keyframes shine
{
0%
{
background-position: top left;
}
28%,100%
{
background-position: bottom right;
}
}
However, most probably the effect will be little noticeable. The reason is that this is a block element, and most probably it extends to the right far beyond the end of the text. So, the diagonal is quite flat. You can check this removing the
-webkit-background-clip: text;
property; you will see now all the h1 and the background movement.
To make it more "diagonal", you need to make it less "wider"; the easier way could be just specify a width.
Also, if you want to make a shine effect, I would choose a radial gradient instead of a linear one. If you don't know it, check colorzilla and in orientation choose radial
By the way, your question sounds familiar to me :-)
I am trying to create a CSS3 animation that will start when the page has been loaded. I am looking the animation to stop and not repeat straight away. I would like like the animation to then begin again in 5 seconds. Is there a simple way of doing this?
Here is the code I have so far that just keeps repeating the animation. I would like the animation to repeat after it is first loaded in another 5 seconds.
h1 {
font-family: 'BebasRegular', sans-serif;
font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;
background: #E9AB17 -webkit-gradient(linear, left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 155px;
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes shine {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
What about making the animation duration 7s:
-webkit-animation-name: shine;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
and adding a keyframe at around 2s, being the same that the final one:
#-webkit-keyframes shine {
0% {
background-position: top left;
}
28%, 100% {
background-position: top right;
}
}
jsfiddle