I'm making a text animation for my friend's website and I'm trying to make a flicker effect, it works, however, it plays once, and I want it to play, then stop, then start again. THe make I've tried only messes it up. Does anyone know a solution?
(my animation code)
.neon span {
animation: flicker 900ms linear 2;
}
.neon .delay1 {
animation-delay: 1.4s;
}
.neon .delay2 {
animation-delay: 2.0s;
}
#keyframes flicker
{
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 0; }
40% { opacity: 1; }
50% { opacity: 0; }
60% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 1; }
}
In the animation: flicker 900ms linear 2; line of code I've tried putting infinte but when I do that it flickers supers fast with no break. I want it to flicker kinda slow then stop, then flicker again.
animation-delay only specifies the delay time before the animation first starts.
animation-iteration-count which (for example) you might specify in your animation shorthand as infinite doesn't include that in between interations.
So, you have to 'fake' it by manually building that into your #keyframes.
.neon span {
animation: flicker 900ms linear 1.4s infinite;
}
#keyframes flicker {
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 0; }
40% { opacity: 1; }
50% { opacity: 0; }
60% { opacity: 1; } /* 'fake' delay */
80% { opacity: 1; } /* 'fake' delay */
100% { opacity: 1; } /* 'fake' delay */
}
In the example above, it will wait 1.4 seconds upon initial page load, then start to flicker between opacity: 0 and opacity: 1 for 60% of your 900ms duration, then stay opacity: 1 for the other 40%.
How fast it flickers will depend on your animation-duration (e.g. 900ms) divided by the number of selectors (steps) over the course of your #keyframes.
So, if you increase/decrease the duration, or decrease/increase the number of keyframe selectors (e.g. 0%, 1%, 2%, 3% ... 100%) it will flicker slower/faster.
Then it will restart immediately after and repeat infinitely.
Discussed here:
CSS animation delay in repeating
CSS animation delay between iterations
Related
Trying to loop through 3 images with only showing one at time for 7 seconds, which then disappears and then show the next one in the sequence, then the next image. The loop needs to be infinite without a "transition / fade" delay.
The images are animating GIFs, so trying to line up the timing with the transitions is so far failing to work.
Currently using this:
.images {
margin: auto;
}
.images img {
position: absolute;
-webkit-animation: fade 21s infinite;
animation: fade 21s infinite;
}
#keyframes fade {
0% {
opacity: 1;
}
15% {
opacity: 1;
}
25% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
-webkit-#keyframes fade {
0% {
opacity: 1;
}
15% {
opacity: 1;
}
25% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#img1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#img2 {
-webkit-animation-delay: -7s;
animation-delay: -7s;
}
#img3 {
-webkit-animation-delay: -14s;
animation-delay: -14s;
}
<div class="images">
<img id="img1" src="https://example.com/gif-1.gif">
<img id="img2" src="https://example.com/gif-2.gif">
<img id="img3" src="https://example.com/gif-3.gif">
</div>
Any help would be greatly appriciated
Here you can define the duration in a variable to control the appearance time of a single image.
I'm using a single set of keyframes, changing the opacity of every image to 1 for ⅓ of the animation-duration (and to 0 for the remaining time).
Unfortunately calc can't be used to define percentages into keyframes, so if you change the number of images you also need to manually change those percentages, as described in the comments inside the code.
Grid display is used as an alternative of position: relative and position: absolute. fetchpriority was used for the first image to increase its priority (since it's the first image of the animation and it has to be loaded soon).
.loop {
--time: 7s;
display: grid;
}
/* show animation only if user hasn't set a preference,
otherwise just show stacked images */
#media (prefers-reduced-motion: no-preference) {
.loop img {
grid-area: 1/1;
animation: rotate calc(var(--time) * 3) linear 0s infinite;
}
.loop img:nth-child(2) { animation-delay: calc(var(--time) * -2); }
.loop img:nth-child(3) { animation-delay: calc(var(--time) * -1); }
}
#keyframes rotate {
/* 33.33% is (100% / number of images) */
0%, 33.33% { opacity: 1; }
/* 33.34% is (100% / number of images) + 0.01 */
33.34%, 100% { opacity: 0; }
}
<div class="loop">
<img src="https://picsum.photos/id/237/300/200/" fetchpriority="high" />
<img src="https://picsum.photos/id/238/300/200/" />
<img src="https://picsum.photos/id/239/300/200/" />
</div>
As a side note, for a matter of accessibility, you should give the user the capability to stop every animation longer than 5 seconds since it can potentially provoke seizures. In any case don't rotate images faster than 3 per second.
.about5 {
animation:
fade 4s ease forwards; animation-delay: 5s;}
#keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0;}}
<div class="about5">About</div>
The animation delays for 5s correctly, but before fading, flashes once. Why? Is this because I'm using ease and should I use linear?
Page on desktop here.
If you only want your content to fade-out, you could set the opacity to the 0% keyframe at 1 like this:
...
#keyframes fade {
0% { opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0;}}
For more information about ease & linear, this post could explain it way better than I could :)
Really like the look of Animate.css, just trying to configure the "flash" feature.
I have added an extra class (.promptflash).
How can I perform the flash for 3 times, then delay for 5 seconds and repeat the loop 3 times, then delay..repeat...
Also trying to slow the initial flash animation down a bit as it flashes quite fast by default
Animate.CSS - List of features
.promptflash {
animation: 0.3s infinite;
animation-delay: 2s;
}
Here you have an working jsfiddle for that. It's without -webkit and -moz prefixes just to show you how you can make that.
.flash {
-webkit-animation-name: move;
animation-name: move;
animation-duration:6s;
}
#keyframes move{
0% { opacity: 0;}
5% { opacity: 1;}
10% { opacity: 0;}
15% { opacity: 1;}
20% { opacity: 0;}
25% { opacity: 1;}
}
EDIT:
I'm basically trying to achieve the result that this web page demonstrates.
http://codepen.io/Chrislion_me/pen/rVqwbO
I'm pretty new to the whole HTML / CSS world.
What I'm trying to do for a project at uni, is create a home page where there's a picture of a lightning storm in the background, covered by a overlay which is too filter out some of the picture Picture of current website.
Basically, the photo has to remain fixed where it is, so if I scrolled further down the page it doesn't move as such [Stationary Lightning Storm][2].
So this is working perfectly fine, problem is, I can't get my lightning storm to work correctly, the storm is meant to flash a couple of times every ~ 8 seconds-ish.
Depending on the way I play with the code, it usually just goes white and then every ~ 8 seconds it flashes the image and then goes white again.
I'm not sure where I'm going wrong, I've posted part of my code below if that helps - it's just section that hosts the image and the buttons, I can post more CSS if that's needed.
Thanks in advance! :)
HTML
<div id="bg" class="banner flashit">
<p>TEST TEXT</p>
<ul class="actions">
<li>Click here</li>
</ul>
</div>
CSS
#bg{
padding: 16em 0 13em 0;
background-attachment: fixed;
background-image: url("images/overlay.png"), url("../images/banner.jpg");
background-position: center top;
background-size: cover;
line-height: 1.75;
text-align: center;
z-index: -2;
}
.banner {
padding: 16em 0 13em 0;
background-attachment: fixed;
background-image: url("images/overlay.png"), url("../images/banner.jpg");
background-position: center top;
background-size: cover;
line-height: 1.75;
text-align: center;
-webkit-filter: brightness(3);
filter: brightness(3);
-o-filter: brightness(3);
-moz-filter: brightness(3);
z-index: -1;
}
.flashit{
-webkit-animation: flash ease-out 10s infinite;
-moz-animation: flash ease-out 10s infinite;
animation: flash ease-out 10s infinite;
animation-delay: 2s;
}
#-webkit-keyframes flash {
from { opacity: 0; }
92% { opacity: 0; }
93% { opacity: 0.6; }
94% { opacity: 0.2; }
96% { opacity: 0.9; }
to { opacity: 0; }
}
#keyframes flash {
from { opacity: 0; }
92% { opacity: 0; }
93% { opacity: 0.6; }
94% { opacity: 0.2; }
96% { opacity: 1; }
to { opacity: 0; }
}
There are a couple of issues with your CSS for the animation. Specifically the keyframes.
In keyframes, if you use from{} and to{} these are the same as "start" and "end". You can't also use percentages in between. From and to are all you can use when going that route. There can be no "middle" steps when using from{} and to{}.
If you want to use percentages for keyframes, all steps need to be a percentage. So rather than using from(), use 0% and instead of to{}, use 100%.
On top of this, since you had all the percentages set to the 90% range and the animation is 10 seconds long, starting from 0% opacity, there was a period of about 11 seconds (2 second delay, then 9 seconds of the animation) where the image is just transparent and it appears as though nothing's there. Changing the percentages to start the flashing at the beginning of the animation then ending on an opaque image helps this considerably.
Ultimately alterations merely came down to tweaking the keyframes:
#-webkit-keyframes flash {
0% { opacity: 1; }
2% { opacity: 0; }
3% { opacity: 0.6; }
4% { opacity: 0.2; }
6% { opacity: 0.9; }
100% { opacity: 1; }
}
#keyframes flash {
0% { opacity: 1; }
2% { opacity: 0; }
3% { opacity: 0.6; }
4% { opacity: 0.2; }
6% { opacity: .9; }
100% { opacity: 1; }
}
In the future it's often easier to get helpful answers if you can set up a jsFiddle of your issue.
I've created a jsFiddle here with the modified keyframes, and different images since I don't have access to your images.
I have a background image for a div.
I need the background to be a different colour other than white until the background image is loaded.
I can not use a background color on a container div, as my background image has transparency and I want to see page content underneath.
is there a way to have a background color which loads instantly, and then when the background image is loaded use that? I know I could do it with JS but is there any fallback method I can use with just css/ html?
You can simply stack the two CSS rules.
background-color: #000;
background-image: url("...");
The background color will display until the image is loaded.
If you are absolutely against Javascript for whatever reason, you can create an effect that mimics what you would obtain with Javascript.
http://jsfiddle.net/8Qk5K/5/
div {
background : url(http://www.st.hirosaki-u.ac.jp/~shimpei/GPS/GPSCMC/images/sphere-transparent.png);
width:500px;
height:500px;
position:relative;
}
.container:before{
width:500px;
height:500px;
position:absolute;
left:0;
top:0;
content:"";
background:#333;
-webkit-animation: fade-out 99999s 1 linear; /* Safari 4+ */
-moz-animation: fade-out 99999s 1 linear; /* Fx 5+ */
-o-animation: fade-out 99999s 1 linear; /* Opera 12+ */
animation: fade-out 99999s 1 linear; /* IE 10+ */
}
#-webkit-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#-moz-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#-o-keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-out {
0% { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
What this does is:
add a block element above your image, with your desired background.
fade that background after little time (you have to find the right amount that works for your content).
keep the background faded with infinite time.
The down side of this as you probably noticed is that you can't predict the exact time. For some, the image would load, for others it may still have a little bit till it loaded.
You can also adjust do fade-out time, depending on browser. If someone access the website with IE8 for example, you can add a higher fade-out time.
Also, a delay can be added to the animation, to only start it after some time.