css animated site reviews

[soaringeagle]

another fun use of css animation is a fade in-out  animated site reviews  or what people are saying paragraph, but instead of taking up  the space of 4 paragraphs the paragraphs fade in and out in the same space

this is just a quick adaptation of my previous animated ads code  that fases in and out jpgs instead of using animated gifs

so this has 2 parts ofcourse the text  in the reviews paragraphs will need to be edited

html part

<strong>What people are saying about DreadlocksSite</strong></p>
<div id="reviews">
<p>This is the best forum i ever been on!</p>
<p>This site seriously saved my dreads</p>
<p>It's so nice to know that with all the bad info out there about dreadlocks, at least one site is honest and cares about the health of dreads, not just profits.</p>
<p>This site has the best info on dreads there is, no other can compare</p>
</div>

that goes in any text box where you want your reviws to show up edit i\it all  except the html elements  the div id and p  tags should be left as is

next paste this into your custom css

div#reviews p {opacity:0;}
@-webkit-keyframes reviewfade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes reviewfade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-ms-keyframes reviewfade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes reviewfade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes reviewfade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
div#reviews {
position:relative;
height:257px;
width:400px;
margin:0;
}
div#reviews p {
position:absolute;
left:0;
}
div#reviews p {
-webkit-animation-name: reviewfade;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 36s;
-moz-animation-name: reviewfade;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 36s;
-ms-animation-name: reviewfade;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-duration: 36s;
-o-animation-name: reviewfade;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 36s;
animation-name: reviewfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 36s;
}
div#reviews p:nth-of-type(1) {
-webkit-animation-delay: 27s;
-moz-animation-delay: 27s;
-ms-animation-delay: 27s;
-o-animation-delay: 27s;
animation-delay: 27s;
}
div#reviews p:nth-of-type(2) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
-o-animation-delay: 18s;
animation-delay: 18s;
}
div#reviews p:nth-of-type(3) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
-o-animation-delay: 9s;
animation-delay: 9s;
}
div#reviews p:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-ms-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}

soooo what this does is 1st set the initial state of the text to  opacity 0 ..in otherwiords  invisible

then <p> by <p> fades 1 in and another out rotating them through the cyclke

and the position statements stack them all up in the same space

so you can have 4 paragraphs of reviews all in 1 paragraphs space fading in and out

im getting addicted to css animations haha

ps\

this can be adapted  to any area where you want to fit alot of text in a small area

you can add more paragraphs but will have to  add more of these

div#reviews p:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-ms-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}

you will also want to make the animation duration longer and change the delay of each p:nth-of-type(number)

say you want 12 paragraphs

each to display 9 seconds

the last p:nth-of-type(12) statement should have a delay of 0 since it starts right away next to last 9s delay etc each 1 from bottom to top adds 9 sec so it begins 9 sec after the previos

remember the above 4 paragraph example has 4 p at 9 sec each   0 9  18 27

the total duration being 36 since the 0 delay 1 starts at 0 runs to 9 where next 1 starts runs to 18 where next starts runs till 27 where the final 1 starts runs till 36  and the anination begins all over again

so a 12  p  animation will need a copy of the p:nth-of-type() statement  with a number from 1-12 and a different delay.. the duration is the delay times number of p 12 x 9 in this case

so see you can have a whole lot of text in 1 small area

[Debby de Wilde]

Oh my........... you have been active!!!! There is going ot be a day where I have time ot play! 

Thanks so much for sharing! 

[soaringeagle]

haha yea im finding all sorts of new uses for css animation now so im having fun figuring out new things

[Vipster]

Spell check?

[Baqur mehdi]

omg, wow such an amazing tip. thanks for sharing mate. cheers

[soaringeagle]

thanks i hope i made it easy to adapt too

i'm having alot of fun learning some new tricks haha

[Baqur mehdi]

hmm, i also like to learn new things.

[Susan Daniels]

css animation...great! Thanks for sharing.

[soaringeagle]

yup its fun  check out the other fun css animation tips i posted recently

[Matt Whisenant]

I tried this and loved the way it worked and looked, BUT...The text box I put this in took up so much extra space below the message that I had to remove it. Is there anyway you can revisit this code and let me know if there is anyway to minimize this added space?

Please!

Matt

[soaringeagle]

height:257px;

adjust that

i had to adjust it based on the length of the longest review

[Matt Whisenant]

Thank you buddy! Worked like a charm! You can check out how I used your tip here! www.scalemodelcollectors.com

Thanks,

Matt

[soaringeagle]

looks great  just remember to add a new keyframe and extend the durationfor every new <p> you add