CSS animation

{"draftJsState":{"blocks":[{"data":{"image":{"id":"641f2dc45b71617e5f4f98a7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"842rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fo7j1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Анимация — обширный модуль в CSS. К сожалению, описать все возможности за один урок невозможно. В этом уроке будет показан базовый принцип анимации в CSS на основе @keyframes. Для примера, сделаем анимацию текста — цвет текста меняется с голубого на красный.","type":"unstyled","key":"crto3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала создадим файл \"index.html\" и запишем в нем следующее:","type":"unstyled","key":"fe7oe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"v78m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"41q47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"c6ubk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"6kue7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"cjrhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" CSS animation","type":"unstyled","key":"4v7h5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"5p8ch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7unft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"38ach"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"l55i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"9rcum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"838d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dmc2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того, чтобы задать анимацию, используется правило @keyframes и название анимации:","type":"unstyled","key":"70bq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Запишем в теге \"\":","type":"unstyled","key":"fld1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"10qb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes color-change {","type":"unstyled","key":"4ne4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // Внутри будет наша анимация","type":"unstyled","key":"beikv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"8o0jc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"62ium"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Название анимации может быть любым. Вы его выбираете самостоятельно. В последствии именно по этому названию свойство animation будет знать, какую именно анимацию необходимо воспроизвести.","type":"unstyled","key":"5qmbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри @keyframes необходимо указать различные временные промежутки, в которых будут происходить изменения. Например, на старте (0% завершённости анимации) будет голубой текст, в середине анимации (50%) — красный, и в конце (100%) — возвращаем голубой цвет.","type":"unstyled","key":"3sn0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2r5u7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes color-change {","type":"unstyled","key":"36i44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 0% {","type":"unstyled","key":"mtu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: blue;","type":"unstyled","key":"32rk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"2mfmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 50% {","type":"unstyled","key":"2dpfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: red;","type":"unstyled","key":"ej12p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"dqndp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 100% {","type":"unstyled","key":"1kn58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: blue;","type":"unstyled","key":"cn20p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"cbl2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"5om57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"kdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь необходимо применить созданную нами анимацию к тексту на странице. Для этого используется правило animation с тремя основными значениями:","type":"unstyled","key":"3q31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Название анимации","type":"unordered-list-item","key":"4sl9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Длительность анимации. Указывается в секундах (1s, 2s, 3s и так далее)","type":"unordered-list-item","key":"d5ep6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Бесконечная анимация или нет (если бесконечная, то указывается параметр infinite)","type":"unordered-list-item","key":"4qig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9mqnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".animation-text { animation: color-change 3s infinite; }","type":"unstyled","key":"5sr2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"evbm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Осталось создать параграф с необходимым классом, и анимация начнёт работать.","type":"unstyled","key":"ec3ac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" В теге \"\" записываем:","type":"unstyled","key":"cmm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cfjg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

здесь аимированный текст

","type":"unstyled","key":"579jh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6pk8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"YkafFhM3L1UVfuTUqUMo"}],"entityMap":{}},"mentions":[]}