Simple CSS Animation Loop Fading In Out Loading Text

Question

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

User · Answer

http   www w3schools com cssref css3 pr animation-keyframes asp  it is actually a browser issue    use -webkit- for chrome

User · Answer

As King King said  you must add the browser specific prefix  This should cover most browsers       x000D   x000D   keyframes flickerAnimation   x000D    0      opacity 1    x000D    50     opacity 0    x000D    100    opacity 1    x000D    x000D   -o-keyframes flickerAnimation  x000D    0      opacity 1    x000D    50     opacity 0    x000D    100    opacity 1    x000D    x000D   -moz-keyframes flickerAnimation  x000D    0      opacity 1    x000D    50     opacity 0    x000D    100    opacity 1    x000D    x000D   -webkit-keyframes flickerAnimation  x000D    0      opacity 1    x000D    50     opacity 0    x000D    100    opacity 1    x000D    x000D   animate-flicker   x000D     -webkit-animation  flickerAnimation 1s infinite  x000D     -moz-animation  flickerAnimation 1s infinite  x000D     -o-animation  flickerAnimation 1s infinite  x000D      animation  flickerAnimation 1s infinite  x000D    x000D   lt div class  animate-flicker  gt Loading    lt  div gt  x000D   x000D   x000D

User · Answer

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   x000D   x000D   keyframes fadeIn    x000D    from   opacity  0     x000D    x000D   x000D   animate-flicker   x000D      animation  fadeIn 1s infinite alternate  x000D    x000D   lt h2 class  animate-flicker  gt Jump in the hole  lt  h2 gt  x000D   x000D   x000D

User · Answer

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

[css] Simple CSS Animation Loop – Fading In & Out "Loading" Text

Examples related to css

Examples related to animation