{"id":1252,"date":"2023-04-11T17:39:00","date_gmt":"2023-04-11T14:39:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1252"},"modified":"2023-04-11T15:52:45","modified_gmt":"2023-04-11T12:52:45","slug":"text-animation","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/1252\/","title":{"rendered":"Text animation"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"316\" style=\"aspect-ratio: 615 \/ 316;\" width=\"615\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-11_13-38-58.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;body&gt;\n    &lt;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Lato&quot; rel=&quot;stylesheet&quot;&gt;\n\n    &lt;div class=&quot;content&quot;&gt;\n      &lt;div class=&quot;content__container&quot;&gt;\n        &lt;p class=&quot;content__container__text&quot;&gt;\n          Hello\n        &lt;\/p&gt;\n        \n        &lt;ul class=&quot;content__container__list&quot;&gt;\n          &lt;li class=&quot;content__container__list__item&quot;&gt;world !&lt;\/li&gt;\n          &lt;li class=&quot;content__container__list__item&quot;&gt;bob !&lt;\/li&gt;\n          &lt;li class=&quot;content__container__list__item&quot;&gt;users !&lt;\/li&gt;\n          &lt;li class=&quot;content__container__list__item&quot;&gt;everybody !&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">body {\n\twidth: 100%;\n\theight: 100%;\n\tposition: fixed;\n\tbackground-color: #34495e;\n  }\n  \n  .content {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\theight: 160px;\n\toverflow: hidden;\n\tfont-family: &quot;Lato&quot;, sans-serif;\n\tfont-size: 35px;\n\tline-height: 40px;\n\tcolor: #ecf0f1;\n  }\n  .content__container {\n\tfont-weight: 600;\n\toverflow: hidden;\n\theight: 40px;\n\tpadding: 0 40px;\n  }\n  .content__container:before {\n\tcontent: &quot;[&quot;;\n\tleft: 0;\n  }\n  .content__container:after {\n\tcontent: &quot;]&quot;;\n\tposition: absolute;\n\tright: 0;\n  }\n  .content__container:after, .content__container:before {\n\tposition: absolute;\n\ttop: 0;\n\tcolor: #16a085;\n\tfont-size: 42px;\n\tline-height: 40px;\n\t-webkit-animation-name: opacity;\n\t-webkit-animation-duration: 2s;\n\t-webkit-animation-iteration-count: infinite;\n\tanimation-name: opacity;\n\tanimation-duration: 2s;\n\tanimation-iteration-count: infinite;\n  }\n  .content__container__text {\n\tdisplay: inline;\n\tfloat: left;\n\tmargin: 0;\n  }\n  .content__container__list {\n\tmargin-top: 0;\n\tpadding-left: 110px;\n\ttext-align: left;\n\tlist-style: none;\n\t-webkit-animation-name: change;\n\t-webkit-animation-duration: 10s;\n\t-webkit-animation-iteration-count: infinite;\n\tanimation-name: change;\n\tanimation-duration: 10s;\n\tanimation-iteration-count: infinite;\n  }\n  .content__container__list__item {\n\tline-height: 40px;\n\tmargin: 0;\n  }\n  \n  @-webkit-keyframes opacity {\n\t0%, 100% {\n\t  opacity: 0;\n\t}\n\t50% {\n\t  opacity: 1;\n\t}\n  }\n  @-webkit-keyframes change {\n\t0%, 12.66%, 100% {\n\t  transform: translate3d(0, 0, 0);\n\t}\n\t16.66%, 29.32% {\n\t  transform: translate3d(0, -25%, 0);\n\t}\n\t33.32%, 45.98% {\n\t  transform: translate3d(0, -50%, 0);\n\t}\n\t49.98%, 62.64% {\n\t  transform: translate3d(0, -75%, 0);\n\t}\n\t66.64%, 79.3% {\n\t  transform: translate3d(0, -50%, 0);\n\t}\n\t83.3%, 95.96% {\n\t  transform: translate3d(0, -25%, 0);\n\t}\n  }\n  @keyframes opacity {\n\t0%, 100% {\n\t  opacity: 0;\n\t}\n\t50% {\n\t  opacity: 1;\n\t}\n  }\n  @keyframes change {\n\t0%, 12.66%, 100% {\n\t  transform: translate3d(0, 0, 0);\n\t}\n\t16.66%, 29.32% {\n\t  transform: translate3d(0, -25%, 0);\n\t}\n\t33.32%, 45.98% {\n\t  transform: translate3d(0, -50%, 0);\n\t}\n\t49.98%, 62.64% {\n\t  transform: translate3d(0, -75%, 0);\n\t}\n\t66.64%, 79.3% {\n\t  transform: translate3d(0, -50%, 0);\n\t}\n\t83.3%, 95.96% {\n\t  transform: translate3d(0, -25%, 0);\n\t}\n  }<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1253,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[16,40],"class_list":["post-1252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements","tag-htmlcss","tag-text"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1252"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1252\/revisions"}],"predecessor-version":[{"id":1255,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1252\/revisions\/1255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1253"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}