{"id":2019,"date":"2018-03-13T00:38:17","date_gmt":"2018-03-13T00:38:17","guid":{"rendered":"http:\/\/thingography.com\/?p=2019"},"modified":"2018-11-06T14:12:41","modified_gmt":"2018-11-06T14:12:41","slug":"css-text-effect","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-text-effect\/","title":{"rendered":"CSS Text Effect Animation"},"content":{"rendered":"<style>\n.ani-box { width: 100%; height: auto; overflow: hidden; background-color: #FCFFE5;}\n.thewords {\n\toverflow: hidden;\n\tmargin: 0em auto 2em auto;\n\twidth: 70%;\n\tposition: relative;\n\tanimation: spread-box 25s infinite;\n\tpadding-bottom: 2em;\n}\n.thewords p {\n\twidth: 100%;\n\tfont-size: 1.2em;\n\tcolor: #000;\nfont-weight: bold;\n\tletter-spacing: 0.2em;\n\tword-spacing: 0.2em;\n\ttext-align: left;\n\tline-height: 1.1em;\n\tanimation: spread 25s infinite;\n}\n\/* ===== Move the Paragraph ===== *\/\n@keyframes spread-box  {\n\t0%  {width:26000px; margin-left:-1800px; transform: rotateZ(-30deg);}\n\t20% {width: 80%;    margin-left: auto; margin-right: auto;  transform: rotateZ(  0deg);}\n\t80% {width: 80%;    margin-left: auto; margin-right: auto;  transform: rotateZ(  0deg);}\n\t100%{width:26000px; margin-left:-1800px; transform: rotateZ(-30deg);}\n} \n\/* ===== Spread the lettering ===== *\/\n@keyframes spread  {\n\t0%  {letter-spacing: 20em; line-height:400px;}\n\t20% {letter-spacing:0.2em; line-height: 22px;}\n\t80% {letter-spacing:0.2em; line-height: 22px;}\n\t100%{letter-spacing: 20em; line-height:400px;}\n} \n<\/style>\n<div class=\"ani-box\">\n<div class=\"thewords\">\n<p>\n\t\t&nbsp;This text animation is played relatively slow to show the effect. The speed can be adjusted to fit your needs. Originally created to be used as a video text effect like the scrolling Star Wars text effect.<br \/>\n\t\t<br \/>&nbsp;The text will play forward and stop for 5-10 seconds then reverse direction and replay infinitely. So if you want you can finish reading next replay if desired.<br \/>\n\t\t<br \/>&nbsp;This is just one of many text animations that can be created with CSS. Using font-size, font-color, letter spacing, word spacing and other CSS properties can render hundred of different effects to suite your needs.<br \/>\n\t\t<br \/>&nbsp;Letter-spacing is not commonly used for CSS animation, that I have observed in my browsing, and can be used for other effects.  One I have toyed with is &#8220;The Matrix&#8221; screen-saver effect with pure CSS.<br \/>\n\t\t<br \/>&nbsp;Thank You for reading this far, I needed text to fill this page, I did not want to use &#8220;Lorem Ipsum&#8221; random text.\n\t<\/p>\n<\/div>\n<\/div>\n<p> <!-- ani-box --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;This text animation is played relatively slow to show the effect. The speed can be adjusted to fit your needs. Originally created to be used as a video text effect like the scrolling Star Wars text effect. &nbsp;The text will<\/p>\n","protected":false},"author":2,"featured_media":2613,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,197,193],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2019"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2019"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2019\/revisions"}],"predecessor-version":[{"id":2633,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2019\/revisions\/2633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2613"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}