How to make text transition with css and react? - css

I'm trying to make a text transition with CSS where the texts should be alternating, should appear slowly, disappear and change text. And this should be infinite.
I'm trying to do the following, but the speed at which the text appears is not the same as it makes it appear, so it's giving a strange effect.
This is the code:
#hello {
animation: pulse 6s linear infinite;
}
#keyframes pulse {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#hello:after {
content: '';
animation: spin 50s linear infinite;
}
#keyframes spin {
0% {
content: 'This is the first text';
}
25% {
content: 'The second text';
}
50% {
content: 'Other text';
}
75% {
content: 'Another example text';
}
100% {
content: 'This is the last text';
}
}
How can I make this transition work correctly? I'm having a little trouble with this, thanks if anyone can help me

You need to do 2 things here:
Last content must be set at 80% instead of 100%, because you want this to repeat infinitely you need to let the last text take the same time that other contents used
You need to start the animations simultaneously using according to this, here is an example:
#hello {
animation: pulse 2s linear infinite;
}
#keyframes pulse {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#hello:after {
content: '';
animation: spin 10s linear infinite 1s;// add this 1s
}
#keyframes spin {
0% {
content: 'This is the first text';
}
20% {
content: 'The second text';
}
40% {
content: 'Other text';
}
60% {
content: 'Another example text';
}
80% {
content: 'This is the last text';
}
100% {
content: 'This is the last text';//must be same as 80% !!
}
}
<div id="hello">
</div>
I tested this a lot but i m still not convinced that this is the proper way to do it, because nothing guarantees that they would start at the same time …
It works perfectly in brave & chrome (where i tried it), but please look for a more strait way to do it ! Using something like this.
Also you can see here is what that 1 second delay do, if you inspect the code and go to animations tab in Dev-tools you will see this:
The added delay fixed the problem.
Note : the unites i used are precise and if you lower any second you would have to add a point … and it depends on the number of contents you want to display

Related

Christmas Lights Loop Effect

I'm trying to create some Christmas lights (in January) using the CSS -webkit-animation property.
For this, I'm using this image:
I've tried:
#-webkit-keyframes lights {
0% {
background-position:0px;
} 100% {
background-position:0 -69px;
}
}
#lights {
width:100%;
height:69px;
background:url(https://mysterybrand.net/assets/images/new-year/live-drop-gardland.png);
-webkit-animation: lights 1s infinite;
}
What I want to achieve: I want to constantly change the background position, so it looks like the lights are turning off and on.
For some reason, my code doesn't change the background position, and animated the image.
You can consider steps()1 to have the needed effect and adjust the positions like below. Pay attention to the initial value because 0 is not the same as 0 0:
#keyframes lights {
0% {
/*Two zeros, not one !!*/
/*[0] is equivalent to [0 50%] and will create a different animation */
background-position:0 0;
}
100% {
background-position:0 -138px;
}
}
#lights {
height:69px;
background:url(https://i.imgur.com/BdGY6tH.png);
animation: lights 1s infinite steps(2);
}
<div id="lights"></div>
Or do it like this:
#keyframes lights {
0%,50% {
background-position:0 0; /*Two zeros, not one !!*/
}
50.1%,100% {
background-position:0 -69px;
}
}
#lights {
height:69px;
background:url(https://i.imgur.com/BdGY6tH.png);
animation: lights 1s infinite;
}
<div id="lights"></div>
1 More details about how to use steps() : https://stackoverflow.com/a/51843473/8620333

Seamless SVG Animation

I am trying to make a seamless animation so teh svg just continues to act like rain in a continous loop. The problem is the animation resets and you can tell. I would like to do this with CSS3 animations. Is the possible?
Full code is in codepen below
#sprinkles { position:absolute; height:100%; width:100%; }
#sprinkles .sprinkle { animation:rainSprinkles .85s linear infinite }
#sprinkles .sprinkle.white { fill:$white; }
#sprinkles .sprinkle.blue { fill:$blue; }
#sprinkles .sprinkle.yellow { fill:$yellow; }
#sprinkles .sprinkle.pink { fill:$hot-pink; }
#keyframes rainSprinkles {
0% {
transform: translateY(-100%);
}
100% {
visibility: hidden;
transform: translateY(1000%);
}
}
Codepen Below:
http://codepen.io/Jesders88/pen/bBYQom
The simplest way is to make your sprinkles be taller than the screen. Now when you move them down more come onto the screen.
Here's a demo.
I've made one change from your example. Instead of having four identical squares of sprinkles, I've taken just one of the four and turned it into a pattern That way the SVG repeats it for you and you can fill any area you want with a continuous pattern of sprinkles.
Then I have made a rectangle that is as wide as the screen and has a height equal to (svgHeight + patternHeight). I start it at -patternHeight off the top of the screen, then animate it down the distance of one patternHeight (487).
#rainRect {
animation: rainSprinkles 2s linear infinite;
}
#keyframes rainSprinkles {
from {
transform: translateY(0px);
}
to {
transform: translateY(487px);
}
}
We move it one patternHeight exactly so that it appears continuous when it jumps back up again to start another loop of the animation.

LESS css variable possibilities/restrictions/syntax usage

I begun to use the LESS library exactly 2 hours ago.
( Time counted AFTER a successfull kind of a Hello World )
My LESS style sheet works.
Here is how I call it in my page:
<!-- LESS CSS -->
<link rel="stylesheet/less" type="text/css" href="myLessCssStyle.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>
I made the equivalent of a Hello world on a single CSS value easy to verify:
#testDisplay: none;
#bigVisibleElement{
display: #testDisplay;
}
Success!
Happy about that, since it was almost too easy...
I started to implement this serious variable handling advantage in a small test style sheet I was working on.
And here is where i'm stucked:
/* my LESS vars definition */
#Bes_ease_in_finish: 10%;
#Bes_ease_out_begin: 80%;
#Bes_ease_out_finish: 90%;
/* A couple more lines that includes other working LESS vars... */
/* This is bugging here. On the first LESS var. */
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#Bes_ease_in_finish { opacity: 1; } /* <--- Line 75 is here. */
#Bes_ease_out_begin { opacity: 1; animation-timing-function: ease-out; }
#Bes_ease_out_finish { opacity: 0; }
100% { opacity: 0 }
}
I defined all other prefix variants of #keyframes (-webkit-, -moz-, -o-, -ms-).
That isn't the problem.
Here is the error I get in console:
«Unrecognised input».
Arrrg... What ?!?
Can't use a LESS vars on these animation timing ?
Why?
Or HOW?
Is there a syntax trick ?
These timing values repeat 5 times FOR EACH animation because of these sickening prefixes... And this is a really simple #keyframes animation (fade in / fade out timing of a couple images) that I obviously wish to get more complex in the future.
THIS is the reason why I looked for LESS library.
Take you time... I wish to have a clear explicative answer.
Or some reference links to read.
My house isn't on fire.
Try this:
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#{Bes_ease_in_finish} { opacity: 1; } /* <--- Line 75 is here. */
#{Bes_ease_out_begin} { opacity: 1; animation-timing-function: ease-out; }
#{Bes_ease_out_finish} { opacity: 0; }
100% { opacity: 0 }
}
Instead of #variable you should use #{variable} when using dynamic directives. (is directive the right word? dunno)

How to use css media query to switch animations

I want to have an animated 'carousel' of thumbnails.
However, for small devices I want my thumbnails to move in a vertical direction; And for larger devices I want my thumbnails to move in a circle.
I am looking for a css-only solution.
It seems fairly easy to do this with just one item ... but once additional items are added, there must be some means of staggering either their start moment or start position. Also for linear, there must be a way to return items that have gone out of the container div to return to make additional passes.
please see my solution down below ...
The key is in the css animation parameter: animation-delay ... and by simply staggering those everything will work (be sure to see my working plunker) ...
However, a lot of hardcoding is required for this: a unique css declaration has to be created for every individual item in the 'carousel', so imagine if you have 50 jpgs in your 'carousel' ... too verbose! (for what it is worth, I actually used php to create those individual, item-specific css declarations in a typical <?php for( /* each item */ ){ /* write its declaration */ }; echo $the_long_css_declarations_string;?>, but I don't show the php here, because this solution can be done without it)
This example uses 3 items in the 'carousel' ... (I have left out vendor-specific rules for simplicity ... (see autoprefixer to get vendor-specific rules))
// css
#media (min-width: 100px )
{
.carousel_item
{ position : absolute ;
top : 5% ;
left : -10% ;
width : auto ;
height : 90% ;
}
.carousel_item[data-index='0']
{ animation: the_name 6s linear 0s infinite normal ;
}
.carousel_item[data-index='1']
{ animation: the_name 6s linear 2s infinite normal ;
}
.carousel_item[data-index='2']
{ animation: the_name 6s linear 4s infinite normal ;
}
#keyframes the_name
{ 0% { transform: translate( -0%) ; }
100%{ transform: translate( 5000%) ; }
}
}
#media (min-width: 500px )
{
.carousel_item
{
position: absolute;
top : 50%;
left : 50%;
width : auto;
height : 10%;
border : solid red 1px ;
}
.carousel_item[data-index='0']
{ animation: the_name 6s linear 0s infinite normal ;
}
.carousel_item[data-index='1']
{ animation: the_name 6s linear 2s infinite normal ;
}
.carousel_item[data-index='2']
{ animation: the_name 6s linear 4s infinite normal ;
}
#keyframes the_name
{ 0% { transform: rotate(0deg) translateX(450%) rotate(0deg) ; }
100%{ transform: rotate(360deg) translateX(450%) rotate(-360deg); }
}
}
// html
<span id = "carousel" >
<span data-index = "0"
class = "carousel_item" >
0
</span>
<span data-index = "1"
class = "carousel_item" >
1
</span>
<span data-index = "2"
class = "carousel_item" >
2
</span>
</span>

CSS Less mixins for keyframes

how to write Less mixin for keyframes.
I have tried in the following way but it is giving error,
ParseError: Directive options not recognized.
.keyFrameAlert(#-webkit-keyframes);
Mixin
.keyFrameAlert(#keyFrame){
#keyFrame alert {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 0;
}
}
}
can anybody help on this issue.
I think it might be throwing an error because of the # prefix for your keyframes, so where your passing #-webkit-keyframes it thinks your trying to pass it a variable with that same name.
There is a slightly different approach to this, where you can declare your keyframes, and add a class inside it which contains your keyframe set.
#-webkit-keyframes alert {.keyframes;}
#keyframes alert {.keyframes;}
.keyframes () {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 0;
}
}
This is slightly different to what you were trying previously, as you would still need to type out all of your vendor prefixes, but you only need to change your keyframes in one place.

Resources