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 :-)
Related
I'm trying to set a interval while my animated gradient text is running but I don't know how to do it with CSS only.
I have 3 different colors and I'd like to initiate it in black, turn to colored and back to black again, like a loop.
HTML
<h2 className="gradient-text">
Text Exemple
</h2>
CSS
.gradient-text {
background: linear-gradient(45deg, #000, #2FEBDC, #EB413B, #FFA300, #E422EB);
background-size:400%;
animation: text-gradient 8s linear infinite;
padding:5px 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
#keyframes text-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 50% 100%;
}
}
Is it possible using only CSS instead javascript?
Your animation-direction is by default set to normal. In order to get back to black in reverse order (i.e, black -> coloured -> black), set it to alternate. This will cycle between playing the animation forwards and backwards.
In order to set a play interval, (i.e, wait at black for a particular amount of time before resuming the animation), you can set two keyframes with no changes between the two. This will make your animation stay put for a set duration before resuming. You will have to increase the animation-duration if you want to retain the speed at which your animation plays.
Your CSS may look something like so:
.gradient-text {
background-image: linear-gradient(45deg, #000, #2FEBDC, #EB413B, #FFA300, #E422EB);
animation: text-gradient 10s linear alternate infinite;
padding: 5px 0;
background-clip: text;
background-size: 400%;
}
#keyframes text-gradient {
0% {
background-position: 0% 50%;
}
33% {
background-position: 0% 50%;
}
66% {
background-position: 50% 100%;
} /* In my example here, this keyframe at 66% is not needed as the animation is progressing linearly from 33% to 100% anyways... it can be omitted */
100% {
background-position: 100% 100%;
}
}
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>
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 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>
Im new to css animation, so I got this sequence movements picture online and want to make it walks. I follow a tutorial but it doesn't work in this case. I'm trying to make it moves. I don't know how to properly do that so I start with the first row of image. Its dimensions are 832x228.
and this is CSS code:
.sprite {
width: 130px;
height: 130px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
}
#keyframes walker {
0% {
background-position: 0 0;
}
100% {
background-position: 832px 0px;
}
}
<div class="sprite"></div>
You are on the right path but the background-position is wrong within the keyframes. Sprite images should move from the right to the left in order to produce a moving animation and so the background position should go from 0 0 to -832px 0.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/* image size is 832x228, so height is set as half of it */
}
#keyframes walker {
0% {
background-position: 0 0;
}
100% {
background-position: -832px 0px;
}
}
<div class='sprite'></div>
As mentioned in Robert C's answer, this will still not get the second row of images to show up. This is because the Y part of background-position doesn't change within the keyframes. The below snippet kindly contributed by Mishko Vladimir is one way to get them to display but problem is that if the no. of steps is increased to 16 (so as to show all sprites) then the animation doesn't work properly anymore.
Also, there will be a blink at the point where Y position changes. So, my recommendation would be to put all 16 sprites in the same row instead of two.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/*832x228*/
}
#keyframes walker {
0% {
background-position: 0 0;
}
50% {
background-position: -832px 0px;
}
51% {
background-position: 0 -114px;
}
100% {
background-position: -832px -114px;
}
}
<div class='sprite'></div>
Looks like you have the wrong background-position, it should be -832px rather than 832px. Note that with the above image you're also only going to get the top 8 frames, you'll need to edit the file to get the bottom 8 for a longer transition.
You may also want to adjust the time in your animation down to a fraction (I had a smoother walk with 0.9), and you'll want to shrink your width and height down to around 115px to avoid seeing some of the other frames.