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>
Related
I am displaying three background images inside #keyframes with the goal of having each background image display for ten seconds, and then automatically change to the next image.
Right now I am able to get all of the three background images to display on the web page and automatically change, but what I notice is the first image changes immediately while the others stay on the screen for much longer.
How can I change the following code below the make each of the three background images display on the web page for ten seconds? Thank you.
<style>
body, html {
height: 100%;
margin: 0;
}
.change-background {
height: 115%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation-name: change;
animation-direction: normal;
animation-iteration-count: infinite;
animation-duration: 30s;
/*animation: change 30s infinite normal;*/
}
#keyframes change {
0% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/avtovo-station.jpg");
}
50% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/kirovsky-zavod.jpg");
}
100% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/zvenigorodskaya.jpg");
}
}
</style>
</head>
<body>
<div class="change-background"></div>
</body>
</html>
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 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>
As you can see from the picture, it includes 6 parts.
I build a div 40px by 40px containing this picture.
overflow:hidden;
I want to animate this picture like it's blinking. which looks like: at the 1st second showing 1st part, the second showing the second part.
[Requirement: please don't make the animation like It's slide from bottom to top. ]
Here's how I did, not working.
1.using keyframe, like 20%, 40%, 60%, 80%, 100%. add top:-40, -80,...; but it looks like I'm slide the picture.
hope someone can help me out. Thanks a lot.
You can use the steps() function applied to a simple CSS3 background animation like so
http://codepen.io/anon/pen/JoEoPL
HTML
<div>Acquiring signal...</div>
CSS
div {
background-repeat: no-repeat;
background-image: url(http://i.stack.imgur.com/CAIVQ.png);
width: 80px;
height: 80px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-animation: blinksignal 6s steps(6, end) infinite;
animation: blinksignal 6s steps(6, end) infinite;
}
#-webkit-keyframes blinksignal {
0% { background-position: 0 0 }
100% { background-position: 0 -480px }
}
#keyframes blinksignal {
0 { background-position: 0 0 }
100% { background-position: 0 -480px }
}
From MDN
The steps() functional notation defines a step function dividing the domain of output values in equidistant steps. This subclass of step functions are sometimes also called staircase functions.
Do You mean about sth like here: http://jsfiddle.net/5jpasp1v/
I've simply add 3 `div' elements with state for each state, and change it with css
HTML:
<div id="wifi">
<div class="state state-1"></div>
<div class="state state-2"></div>
<div class="state state-3"></div>
</div>
CSS:
#keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.state-1 {...}
.state-2 {...}
.state-3 {...}
I have done a simple three image transition animation code. The code can be found here:
http://jsfiddle.net/harshithjv/AF3Jj/
This code works only on chrome and chromium browsers. It does not work on Apple's Safari browser also. Also it does not work on any other browsers(I tested on Firefox and IE9, not tried Opera).
I guess that I am missing something on animation shorthand property. Please help me out.
Edit:
I am updating with the code for some clarity, which I should have done in first place.
HTML Code:
<div class="animated_star"></div>
CSS3 Code:
#-moz-keyframes shining_star {
from {
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
to {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
#-webkit-keyframes shining_star {
from {
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
100% {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
#keyframes shining_star {
from{
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
to {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
.animated_star{
height: 16px;
width: 16px;
float: left;
-webkit-animation: shining_star 1s infinite; /* works only for Chrome/Chromium */
-moz-animation: shining_star 1s infinite;
animation: shining_star 1s infinite;
}
Background image isn't a property that can be animated - you can't tween the property.
Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.
also
It works in Chrome 19!
So at some point in the future, keyframes could really be... frames!
You are living in the future ;)
After some research on this, I figured that background-image CSS property is not supported inside keyframes in most browsers. It must be because of loading too many images dynamically can lead to performance issues if larger images are loaded.
Thanks to #Morpheus for another stackoverflow link(http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations), through which I decided to resolve the issue through image sprites and reposition(using CSS property - background-position) within that sprite to select the image as I want it. The problem with background-position CSS property is that when it applied for CSS animation through keyframes, the reposition shows the movement within image sprite. But I wanted to show 3 stars transition quickly without movement in three frames. To make that possible, I had to use 6 keyframes where first star's position will be set in 0% and 33%, second star's position will be set in 34% and 66% and the third star will be set in 67% and 100%.
I have created a jsFiddle which does not have image sprites of same stars. I could not locate sprite for same stars online and so I used alternate stars. Its not a perfect example since it has sloppy animation, but I have created a smaller sprite image (48px x 16px) on my system, and animation looks good enough.
HTML Code:
<div class="animated_star"></div>
CSS Code:
#-moz-keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
#-webkit-keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
#keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
.animated_star{
height: 130px;
width: 135px;
float: left;
background: transparent url('http://azmind.com/wp-content/uploads/2011/11/social-star-icons.png') no-repeat fixed;
background-position: 0px -390px;
-webkit-animation: shining_star .5s infinite linear;
-moz-animation: shining_star .5s infinite linear;
animation: shining_star .5s infinite linear;
}
The jsFiddle link: http://jsfiddle.net/harshithjv/7QvSP/2/