Without Javascript, I'd like to make a simple looping CSS animation class that fades text in and out, infinitely. I don't know a lot about CSS animations, so I haven't figured it out yet, but here's how far I've gotten:
#keyframes flickerAnimation { /* flame pulses */
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.animate-flicker {
opacity:1;
animation: flickerAnimation 1s infinite;
}
As King King said, you must add the browser specific prefix. This should cover most browsers:
#keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.animate-flicker {
-webkit-animation: flickerAnimation 1s infinite;
-moz-animation: flickerAnimation 1s infinite;
-o-animation: flickerAnimation 1s infinite;
animation: flickerAnimation 1s infinite;
}
<div class="animate-flicker">Loading...</div>
well looking for a simpler variation I found this:
it's truly smart, and I guess you might want to add other browsers variations too although it worked for me both on Chrome and Firefox.
demo and credit => http://codepen.io/Ahrengot/pen/bKdLC
#keyframes fadeIn {
from { opacity: 0; }
}
.animate-flicker {
animation: fadeIn 1s infinite alternate;
}
<h2 class="animate-flicker">Jump in the hole!</h2>
To make more than one element fade in/out sequentially such as 5 elements fade each 4s,
1- make unique animation for each element with animation-duration equal to [ 4s (duration for each element) * 5 (number of elements) ] = 20s
animation-name: anim1 , anim2, anim3 ...
animation-duration : 20s, 20s, 20s ...
2- get animation keyframe for each element.
100% (keyframes percentage) / 5 (elements) = 20% (frame for each element)
3- define starting and ending point for each animation:
each animation has 20% frame length and #keyframes percentage always starts from 0%,
so first animation will start from 0% and end in his frame(20%),
and each next animation will starts from previous animation ending point and end when it reach his frame (+20% ),
#keyframes animation1 { 0% {}, 20% {}}
#keyframes animation2 { 20% {}, 40% {}}
#keyframes animation3 { 40% {}, 60% {}}
and so on
now we need to make each animation fade in from 0 to 1 opacity and fade out from 1 to 0,
so we will add another 2 points (steps) for each animation after starting and before ending point to handle the full opacity(1)
http://codepen.io/El-Oz/pen/WwPPZQ
.slide1 {
animation: fadeInOut1 24s ease reverse forwards infinite
}
.slide2 {
animation: fadeInOut2 24s ease reverse forwards infinite
}
.slide3 {
animation: fadeInOut3 24s ease reverse forwards infinite
}
.slide4 {
animation: fadeInOut4 24s ease reverse forwards infinite
}
.slide5 {
animation: fadeInOut5 24s ease reverse forwards infinite
}
.slide6 {
animation: fadeInOut6 24s ease reverse forwards infinite
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
14% {opacity: 1 }
16% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
14% {opacity: 0 }
16% { opacity: 1 }
30% { opacity: 1 }
33% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
30% {opacity: 0 }
33% {opacity: 1 }
46% { opacity: 1 }
48% { opacity: 0 }
}
#keyframes fadeInOut4 {
0% { opacity: 0 }
46% { opacity: 0 }
48% { opacity: 1 }
64% { opacity: 1 }
65% { opacity: 0 }
}
#keyframes fadeInOut5 {
0% { opacity: 0 }
64% { opacity: 0 }
66% { opacity: 1 }
80% { opacity: 1 }
83% { opacity: 0 }
}
#keyframes fadeInOut6 {
80% { opacity: 0 }
83% { opacity: 1 }
99% { opacity: 1 }
100% { opacity: 0 }
}
I just used this in React and it works:
css:
#hightlight {
animation: fadein 2s infinite;
}
#keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
HTML:
<h1 id="hightlight"> hello </h1>
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
it is actually a browser issue... use -webkit- for chrome
Related
I have an element I would like to fade in and fade out but show for 10 seconds.
.element {
-webkit-animation: fadeinout 2s linear forwards;
transition-delay: 10s;
animation: fadeinout 2s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
I have been trying for a while and think I have completely miss understood something.
UPDATE -----
What I'm trying to do is for the element to fade in over 2 seconds then show for 10 secs then fade out over 2 seconds.
transition-delay is wrong. It is about the transition. The equivalent of that is: animation-delay. use animation-duration: 14s for the time of running animation. or:
.element {
-webkit-animation: fadeinout 14s linear forwards;
animation: fadeinout 14s linear forwards;
opacity: 0;
width: 100px;
height: 100px;
background-color: red;
}
#-webkit-keyframes fadeinout {
14% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fadeinout {
14% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; }
}
<div class="element"></div>
This may be a little verbose, but if it is acceptable for your fade duration to be proportional to the duration it is shown you could use a keyframe structure like this:
#keyframes fadeinout {
0% { opacity: 0; },
10% { opacity: 1; },
90% { opacity: 1; },
100% { opacity: 0; }
}
To get a 2 second fadein, a 'stay there' for 10 seconds and then a 2 second fadeout you have an overall animation time of 14 seconds.
For the first (2 / 14) * 100% [=14.29%] you want the opacity to go from 0 to 1
For the next (10 / 14) * 100% [=71.43%] you want the opacity to stay at 1
For the last (2 / 14) * 100% [=14.29%] you want the opacity to go from 1 to 0.
So the animation keyframes look like this:
#keyframes fadeinout {
0%, 100% { opacity: 0; }
14.29%, 85.72% { opacity: 1; }
}
You don't want a delay on your animation (animation-delay just delays the start of an animation).
Current CSS does not allow us to use a calc function in the % settings in keyframes so we've had to do the calculation in advance and build it in (it didn't seem worth going to more than a couple of decimal places).
.element {
animation: fadeinout 14s linear forwards;
opacity: 0;
width: 20vmin;
height: 20vmin;
background-color: magenta;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
14.29%,
85.72% {
opacity: 1;
}
}
<div class="element"></div>
I have this animation, it is currently meant to be only fast at the start, however when it reaches 85% - 95% the cubic-Bezier should be continuously slow instead of starting from point 0 again and creating another fast start motion. Is there any way to add multiple cubic-Beziers for each animation state change or have the easing-function continuous from state to state?
.animate-winner {
animation: rollWinnerBait 9s cubic-bezier(0,.9,.76,.99) forwards normal 1
}
#keyframes rollWinnerBait {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(-80px)
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(-9px)
}
100% {
transform: translateX(0px)
}
}
Update the timing function inside the animation:
.animate-winner {
animation: rollWinnerBait 5s cubic-bezier(0, .9, .76, .99) forwards;
width:100px;
height:100px;
margin:5px;
background:red;
}
.animate-winner.new {
animation: rollWinnerBait-new 5s cubic-bezier(0, .9, .76, .99) forwards;
}
#keyframes rollWinnerBait {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(-80px);
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(-9px)
}
100% {
transform: translateX(0px);
}
}
#keyframes rollWinnerBait-new {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(-80px);
animation-timing-function:linear;
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(-9px)
}
100% {
transform: translateX(0px);
animation-timing-function:linear;
}
}
<div class="animate-winner"></div>
<div class="animate-winner new"></div>
This code works in current chrome and internet explorer, but not in current firefox (UPDATED Code with unnecessary -moz prefix):
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
The element does not appear at all.
Alas, none of the other identically entitled questions help in this case...
ADDITION / HINT
Maybe my problem lies not within the code above, but in the question
how is the CSS animation fired?
The element in question is simply turned on with ...style.display='inline'. For Chrome and IE, that seems to be ok. But is it not ok for firefox?
You forgot to add rule for firefox. checkout following code
#-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
That's because you are missing the definition for Mozilla Broswer keyframes.
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
and the moz-animation
.sh-tada {
-moz-animation:sh-tada 2s linear 1;
}
Add these to your css and it should work.
How do I combine these two animations (translate & buttonFade) so that they both affect the same image ? Both animations work seperatley but not together. Is there a way to combine the two? (I have omitted the -moz- , -o- etc purposefully to make it easier to read, I have tried adding these and it makes no difference)
translate {
-webkit-animation: moveLeft 1s forwards;
}
#-webkit-keyframes moveLeft {
0% {-webkit-transform: translateX(0px)}
100% {-webkit-transform: translateX(100px)}
}
.intro-button{
position:absolute;
top: 350px;
left: 625px;
opacity: 0;
-webkit-animation: buttonFade 3s 1 forwards;
-webkit-animation-delay: 2s;
}
#-webkit-keyframes buttonFade {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
Any help would be much appreciated!
You can list multiple animations by separating them with a comma, as such you can simply call moveLeft from your CSS for .intro-button and remove your CSS for translate (which by the way is not a valid selector).
You'll also want to add a other value for the animation delay, which should be first animation delay + first animation duration (4s)
Demo Fiddle
Change your CSS thusly:
#-webkit-keyframes moveLeft {
0% {
-webkit-transform: translateX(0px)
}
100% {
-webkit-transform: translateX(100px)
}
}
.intro-button {
position:absolute;
top: 350px;
left: 625px;
opacity: 0;
-webkit-animation: buttonFade 3s 1 forwards, moveLeft 1s forwards;
-webkit-animation-delay: 2s, 4s;
}
#-webkit-keyframes buttonFade {
0% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
You can actually concatenate the animation property further:
-webkit-animation: buttonFade 3s 2s 1 forwards, moveLeft 1s 4s forwards;
Removing the need to set animation duration separately The shorthand foranimation is:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;
I am trying to spin a null set image but my code is not working.
If I ran on my own computer, the picture goes black and spin.
What is the problem?
#-webkit-keyframes rotate {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
#refresh {
width:48px;
height:48px;
position:fixed;
top:150px;
right:150px;
background:url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif);
-webkit-animation: rotate 2s linear infinite;
}
<div id="refresh" ></div>
http://jsfiddle.net/Pg2pj/
It seems to work just fine. Here: http://cssdesk.com/6VyMM
I updated your FIDDLE, have a look.
Hope this can help you
You can also use percent in your animation instead of from and to
CSS:
#-webkit-keyframes rotate {
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
#refresh {
width: 48px;
height: 48px;
top: 0px;
right: 0px;
background: grey url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif) no-repeat;
background-size: 100% 100%;
-webkit-animation: rotate 2s linear 0s infinite;
}
Remember for cross-browser compatibility:
#-webkit-keyframes rotate {
0% { }
100% { }
}
#-moz-keyframes rotate {
0% { }
100% { }
}
#-o-keyframes rotate {
0% { }
100% { }
}
#keyframes rotate {
0% { }
100% { }
}
#refresh {
-webkit-animation: rotate 2s linear 0s infinite /* Safari 4+ */
-moz-animation: rotate 2s linear 0s infinite /* Fx 5+ */
-o-animation: rotate 2s linear 0s infinite /* Opera 12+ */
animation: rotate 2s linear 0s infinite /* IE 10+ */
}