<div class=\"fade-in\">\n \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\n<\/div><\/code><\/pre>\n\n\n\n\u0421\u0442\u0438\u043b\u0438:<\/p>\n\n\n\n
.fade-in {\n opacity: 0;\n transform: translateY(20px);\n animation: css-animation-fadeInUp 0.6s ease-out forwards;\n}\n\n@keyframes css-animation-fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/code><\/pre>\n\n\n\n\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/h2>\n\n\n\n\nopacity: 0<\/code><\/strong> \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u0432\u0438\u0434\u0438\u043c.<\/li>\n\n\n\ntransform: translateY(20px)<\/code><\/strong> \u2014 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0432\u043d\u0438\u0437.<\/li>\n\n\n\nanimation<\/code><\/strong> \u2014 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e fadeInUp<\/code> \u043d\u0430 0.6 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f (ease-out<\/code>) \u0438 \u0444\u043b\u0430\u0433\u043e\u043c forwards<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/li>\n\n\n\n- \u0412
@keyframes<\/code> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0438 \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0451 \u043c\u0435\u0441\u0442\u043e.<\/li>\n<\/ul>\n\n\n\n\u0412\u0430\u0440\u0438\u0430\u0446\u0438\u0438<\/h2>\n\n\n\n
\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u043a\u0443\u0434\u0430 \u0438\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0430 — \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u0435\u0432\u0430\/\u0441\u043f\u0440\u0430\u0432\u0430:<\/p>\n\n\n\n
transform: translateX(-20px); \/* \u0432\u043c\u0435\u0441\u0442\u043e Y *\/<\/code><\/pre>\n\n\n\n\u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0434\u043b\u044f \u043f\u043e\u043e\u0447\u0435\u0440\u0451\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f (\u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0432 \u0434\u0435\u043c\u043a\u0435):<\/p>\n\n\n\n
animation-delay: 0.3s;<\/code><\/pre>\n\n\n\n\u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c transition<\/code> \u0432\u043c\u0435\u0441\u0442\u043e animation<\/code>, \u0442.\u043a. \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0433\u0434\u0430, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0430 \u0447\u0435\u0440\u0435\u0437 JS).<\/p>\n","protected":false},"excerpt":{"rendered":"\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e — \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u0437 \u0446\u0438\u043a\u043b\u0430 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u043f\u043e CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[129],"tags":[220],"class_list":["post-15073","post","type-post","status-publish","format-standard","hentry","category-v-nedrakh-shra-ru","tag-css"],"acf":[],"yoast_head":"\n
\u041f\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n