{"id":3410,"date":"2019-07-22T16:08:43","date_gmt":"2019-07-22T16:08:43","guid":{"rendered":"https:\/\/inoveo.ro\/uncategorized\/animatii-css-simple-pentru-website-ul-tau\/"},"modified":"2019-07-22T16:08:43","modified_gmt":"2019-07-22T16:08:43","slug":"animatii-css-simple-pentru-website-ul-tau","status":"publish","type":"post","link":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/","title":{"rendered":"Animatii CSS simple pentru website-ul tau"},"content":{"rendered":"<h2><strong>Daca un design bun face ca website-ul tau sa iasa in evidenta fata de competitori, animatiile vor da suflet acestuia si vor incanta vizitatorii.<\/strong><\/h2>\n<p>Animatiile dintr-un website pot fi foarte complicate, uneori fiind necesar sa fie scrise multe linii de cod folosind CSS si JS. De data asta ne vom concentra pe un numar mic de animatii, scrise doar in CSS, pe care oricine le poate implementa foarte usor in site-ul lor pentru a face ca lucrurile sa fie mai dinamice si placute. <\/p>\n<p>Prima categorie de animatii sunt cele de hover unde miscarea mouse-ului peste un element va porni animatia. Avem la alegere doua metode: folosind <strong>transition<\/strong> sau <strong>animation<\/strong>. Primul element (cerc in exemplul nostru) isi va schimba culoarea si textul ascuns va aparea folosind transition iar al doilea element isi va schimba dimensiunile folosind animation si transition. Avantajul la animation este puterea de control mult mai mare asupra animatiei. (pe mobil atingeti cercurile cu degetul sa porniti animatia si apoi oriunde sa o terminati)<\/p>\n<div class='anim1-blog'>\n<div class='elem1-wrapper'>\n<div class='elem1-container'>\n      <span>Hover!<\/span>\n    <\/div>\n<\/p><\/div>\n<div class='elem2-wrapper'>\n<div class='elem2-container'>\n      <span>Hover!<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<p>Cod sursa pe <a href=\"https:\/\/codepen.io\/Puiu\/pen\/xvwjOg\">Codepen<\/a><\/p>\n<p>A doua categorie de animatii sunt cele care se repeta la infinit. Se pot forma elemente jucause pe site sau elemente care sa atraga atentia vizitatorului asupra unei zone importante a site-ului.<\/p>\n<div class='anim2-blog'>\n<div class='elem3-wrapper'>\n<div class='elem3-container'>\n        <span>!<\/span>\n      <\/div>\n<\/p><\/div>\n<div class='elem4-wrapper'>\n<div class='elem4-container'>\n        <span>!<\/span>\n      <\/div>\n<\/p><\/div>\n<\/div>\n<p>Cod sursa pe <a href=\"https:\/\/codepen.io\/Puiu\/pen\/RXWYEq\">Codepen<\/a><\/p>\n<p>Indiferent de ce tip de animatie introducem in website acestea trebuie sa se alinieze intotdeauna cu design-ul folosit. In acelasi timp trebuie sa avem grija sa nu introducem prea multe elemente care sa afecteze performanta. Intr-un articol viitor vom discuta despre animatiile de la incarcarea unei pagini si cele care pornesc de la un click.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Daca un design bun face ca website-ul tau sa iasa in evidenta fata de competitori, animatiile vor da suflet acestuia si vor incanta vizitatorii. Animatiile dintr-un website pot fi foarte complicate, uneori fiind necesar sa [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/\">Read More&#8230;<span class=\"screen-reader-text\"> from Animatii CSS simple pentru website-ul tau<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[57],"tags":[],"class_list":["post-3410","post","type-post","status-publish","format-standard","hentry","category-website-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Animatii CSS simple pentru website-ul tau - INOVEO<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animatii CSS simple pentru website-ul tau\" \/>\n<meta property=\"og:description\" content=\"Daca un design bun face ca website-ul tau sa iasa in evidenta fata de competitori, animatiile vor da suflet acestuia si vor incanta vizitatorii. Animatiile dintr-un website pot fi foarte complicate, uneori fiind necesar sa [...]Read More... from Animatii CSS simple pentru website-ul tau\" \/>\n<meta property=\"og:url\" content=\"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/\" \/>\n<meta property=\"og:site_name\" content=\"INOVEO\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inoveobranding\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-22T16:08:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/inoveo.ro\/wp-content\/uploads\/2020\/08\/inoveo-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"336\" \/>\n\t<meta property=\"og:image:height\" content=\"416\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Inoveo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@inoveobranding\" \/>\n<meta name=\"twitter:site\" content=\"@inoveobranding\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Inoveo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/\"},\"author\":{\"name\":\"Inoveo\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/#\\\/schema\\\/person\\\/b2385fd5dcd9d87cf609b6f457fc4a0b\"},\"headline\":\"Animatii CSS simple pentru website-ul tau\",\"datePublished\":\"2019-07-22T16:08:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/\"},\"wordCount\":268,\"publisher\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/#organization\"},\"articleSection\":[\"WEBSITE DEVELOPMENT\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/\",\"url\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/\",\"name\":\"Animatii CSS simple pentru website-ul tau - INOVEO\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/#website\"},\"datePublished\":\"2019-07-22T16:08:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animatii CSS simple pentru website-ul tau\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/\",\"name\":\"INOVEO\",\"description\":\"Agentie de branding ce ofera servicii de branding, rebranding, package design, webdesign si strategii in mediul online.\",\"publisher\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Organization\",\"Place\",\"ProfessionalService\"],\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/#organization\",\"name\":\"INOVEO Concept\",\"alternateName\":\"INOVEO\",\"url\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/\",\"logo\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#local-main-organization-logo\"},\"image\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#local-main-organization-logo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inoveobranding\\\/\",\"https:\\\/\\\/x.com\\\/inoveobranding\",\"https:\\\/\\\/www.instagram.com\\\/inoveo.consultants\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inoveoconsultants\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@inoveo\"],\"address\":{\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#local-main-place-address\"},\"telephone\":[\"+40740111771\"],\"openingHoursSpecification\":[{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\"],\"opens\":\"09:00\",\"closes\":\"18:00\"},{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Saturday\",\"Sunday\"],\"opens\":\"00:00\",\"closes\":\"00:00\"}],\"email\":\"hello@inoveo.ro\",\"vatID\":\"RO34938044\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/#\\\/schema\\\/person\\\/b2385fd5dcd9d87cf609b6f457fc4a0b\",\"name\":\"Inoveo\"},{\"@type\":\"PostalAddress\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#local-main-place-address\",\"streetAddress\":\"Str. Doctor Niculae D. Staicovici 51, Etaj 2, Ap 5\",\"addressLocality\":\"Bucuresti\",\"postalCode\":\"050559\",\"addressRegion\":\"Bucure\u0219ti\",\"addressCountry\":\"RO\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/inoveo.ro\\\/en\\\/website-development\\\/animatii-css-simple-pentru-website-ul-tau\\\/#local-main-organization-logo\",\"url\":\"https:\\\/\\\/inoveo.ro\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/inoveo-logo.png\",\"contentUrl\":\"https:\\\/\\\/inoveo.ro\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/inoveo-logo.png\",\"width\":336,\"height\":416,\"caption\":\"INOVEO Concept\"}]}<\/script>\n<meta name=\"geo.placename\" content=\"Bucuresti\" \/>\n<meta name=\"geo.region\" content=\"Romania\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Animatii CSS simple pentru website-ul tau - INOVEO","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/","og_locale":"en_US","og_type":"article","og_title":"Animatii CSS simple pentru website-ul tau","og_description":"Daca un design bun face ca website-ul tau sa iasa in evidenta fata de competitori, animatiile vor da suflet acestuia si vor incanta vizitatorii. Animatiile dintr-un website pot fi foarte complicate, uneori fiind necesar sa [...]Read More... from Animatii CSS simple pentru website-ul tau","og_url":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/","og_site_name":"INOVEO","article_publisher":"https:\/\/www.facebook.com\/inoveobranding\/","article_published_time":"2019-07-22T16:08:43+00:00","og_image":[{"width":336,"height":416,"url":"https:\/\/inoveo.ro\/wp-content\/uploads\/2020\/08\/inoveo-logo.png","type":"image\/png"}],"author":"Inoveo","twitter_card":"summary_large_image","twitter_creator":"@inoveobranding","twitter_site":"@inoveobranding","twitter_misc":{"Written by":"Inoveo","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#article","isPartOf":{"@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/"},"author":{"name":"Inoveo","@id":"https:\/\/inoveo.ro\/en\/#\/schema\/person\/b2385fd5dcd9d87cf609b6f457fc4a0b"},"headline":"Animatii CSS simple pentru website-ul tau","datePublished":"2019-07-22T16:08:43+00:00","mainEntityOfPage":{"@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/"},"wordCount":268,"publisher":{"@id":"https:\/\/inoveo.ro\/en\/#organization"},"articleSection":["WEBSITE DEVELOPMENT"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/inoveo.ro\/#organization"}},{"@type":"WebPage","@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/","url":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/","name":"Animatii CSS simple pentru website-ul tau - INOVEO","isPartOf":{"@id":"https:\/\/inoveo.ro\/en\/#website"},"datePublished":"2019-07-22T16:08:43+00:00","breadcrumb":{"@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/inoveo.ro\/en\/home\/"},{"@type":"ListItem","position":2,"name":"Animatii CSS simple pentru website-ul tau"}]},{"@type":"WebSite","@id":"https:\/\/inoveo.ro\/en\/#website","url":"https:\/\/inoveo.ro\/en\/","name":"INOVEO","description":"Agentie de branding ce ofera servicii de branding, rebranding, package design, webdesign si strategii in mediul online.","publisher":{"@id":"https:\/\/inoveo.ro\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/inoveo.ro\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Organization","Place","ProfessionalService"],"@id":"https:\/\/inoveo.ro\/en\/#organization","name":"INOVEO Concept","alternateName":"INOVEO","url":"https:\/\/inoveo.ro\/en\/","logo":{"@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#local-main-organization-logo"},"image":{"@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#local-main-organization-logo"},"sameAs":["https:\/\/www.facebook.com\/inoveobranding\/","https:\/\/x.com\/inoveobranding","https:\/\/www.instagram.com\/inoveo.consultants\/","https:\/\/www.linkedin.com\/company\/inoveoconsultants\/","https:\/\/www.youtube.com\/@inoveo"],"address":{"@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#local-main-place-address"},"telephone":["+40740111771"],"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday"],"opens":"09:00","closes":"18:00"},{"@type":"OpeningHoursSpecification","dayOfWeek":["Saturday","Sunday"],"opens":"00:00","closes":"00:00"}],"email":"hello@inoveo.ro","vatID":"RO34938044"},{"@type":"Person","@id":"https:\/\/inoveo.ro\/en\/#\/schema\/person\/b2385fd5dcd9d87cf609b6f457fc4a0b","name":"Inoveo"},{"@type":"PostalAddress","@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#local-main-place-address","streetAddress":"Str. Doctor Niculae D. Staicovici 51, Etaj 2, Ap 5","addressLocality":"Bucuresti","postalCode":"050559","addressRegion":"Bucure\u0219ti","addressCountry":"RO"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/#local-main-organization-logo","url":"https:\/\/inoveo.ro\/wp-content\/uploads\/2020\/08\/inoveo-logo.png","contentUrl":"https:\/\/inoveo.ro\/wp-content\/uploads\/2020\/08\/inoveo-logo.png","width":336,"height":416,"caption":"INOVEO Concept"}]},"geo.placename":"Bucuresti","geo.region":"Romania"},"featured_image_src":"","featured_image_src_square":false,"author_info":{"display_name":"Inoveo","author_link":"https:\/\/inoveo.ro\/en\/author\/marius\/"},"rbea_author_info":{"display_name":"Inoveo","author_link":"https:\/\/inoveo.ro\/en\/author\/marius\/"},"rbea_excerpt_info":"Daca un design bun face ca website-ul tau sa iasa in evidenta fata de competitori, animatiile vor da suflet acestuia si vor incanta vizitatorii. Animatiile dintr-un website pot fi foarte complicate, uneori fiind necesar sa [...]<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/\">Read More...<span class=\"screen-reader-text\"> from Animatii CSS simple pentru website-ul tau<\/span><\/a><\/p> [...]<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"https:\/\/inoveo.ro\/en\/website-development\/animatii-css-simple-pentru-website-ul-tau\/\">Read More...<span class=\"screen-reader-text\"> from Animatii CSS simple pentru website-ul tau<\/span><\/a><\/p>","category_list":"<a href=\"https:\/\/inoveo.ro\/en\/category\/website-development\/\" rel=\"category tag\">WEBSITE DEVELOPMENT<\/a>","comments_num":"0 comments","_links":{"self":[{"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/posts\/3410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/comments?post=3410"}],"version-history":[{"count":0,"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/posts\/3410\/revisions"}],"wp:attachment":[{"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/media?parent=3410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/categories?post=3410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inoveo.ro\/en\/wp-json\/wp\/v2\/tags?post=3410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}