Christmas Lights Loop Effect - css

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

Related

How to make text transition with css and react?

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

Animations only affect first element of css-doodle

I want to make random "blinking" effect when hovering over a doodle. For this i store animation name blink into a variable when user hovers over doodle container. For some reason animation applies only to the first element of the grid. Is there a way to apply the animation to all elements?
CodePen: https://codepen.io/entityinarray/pen/mdbRPRz
<html>
<script src="https://unpkg.com/css-doodle#0.7.2/css-doodle.min.js"></script>
<css-doodle>
:doodle {
#grid: 4/128px;
--h: ;
}
:doodle(:hover) {--h: blink;}
background: #200040;
animation-delay: rand(500ms);
animation: #var(--h) 1s infinite;
#keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>
The issue is that the use of #var(--h) is generating code like var(--h)-x which is invalid and only the first item is having the good value var(--h).
Instead of doing this you can simply consider the animation state like below. Note that rand() should be used with # and placed after the animation definition:
<html>
<script src="https://unpkg.com/css-doodle#0.7.2/css-doodle.min.js"></script>
<css-doodle>
:doodle {
#grid: 4/128px;
}
:doodle(:hover) {--h:running;}
background: #200040;
animation: blink 1s infinite;
animation-play-state:var(--h,paused);
animation-delay: #rand(500ms);
#keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>

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.

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>

How to persist css3 animation change

Goal is to keep the background red at the end of the animation.
Using chrome
http://codepen.io/JulianNorton/pen/RNqLZM
.animation {
-webkit-animation:test-animation 2s 2;
// Animation stops after a few seconds, state doesn't stay red.
}
#-webkit-keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}
#keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}
animation-fill-mode: forwards;
is most likely what you were looking for.
Source:
CSS Animation property stays after animating
Just set the background color of your .animation element to red. Since the keyframe animation is triggered automatically, it will not appear red at first, but white like you want.

Resources