{"id":291,"date":"2023-10-09T22:38:19","date_gmt":"2023-10-09T20:38:19","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=291"},"modified":"2023-10-09T22:39:30","modified_gmt":"2023-10-09T20:39:30","slug":"animacia","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=291","title":{"rendered":"Anim\u00e1cia"},"content":{"rendered":"<h2><span style=\"font-size: 16px;\">CSS3 prechody<\/span><\/h2>\n<div id=\"node-756\" class=\"node\">\n<div class=\"content clear-block clear-both \">\n<p><a class=\"ext\" href=\"http:\/\/tympanus.net\/Tutorials\/OriginalHoverEffects\/\" target=\"_blank\" rel=\"nofollow noopener\">Original Hover Effects with CSS3 Transitions and Animations<\/a><\/p>\n<p>Syntax:<\/p>\n<pre>transition: \r\n  (str\u00e1\u017een\u00e9_vlastnosti) \r\n  trvanie_anim\u00e1cie \r\n  (funkcia_priebehu) \r\n  (oneskorenie) \r\n  (, \u010fal\u0161ie_prechody);<\/pre>\n<h3>CSS3 transform\u00e1cia<\/h3>\n<p>Rot\u00e1cia, zv\u00e4\u010d\u0161enie a zmena prieh\u013eadnosti pri nabehnut\u00ed my\u0161ou:<\/p>\n<pre>.thumbs { \r\n  opacity: 0; \r\n  transform: rotateY(180deg) scale(0.5, 0.5); \r\n  transition: all 450ms ease-out 0s; \r\n} \r\n.thumbs:hover { \r\n\u00a0\u00a0opacity: 1; \r\n  transform: rotateY(0deg) scale(1, 1); \r\n}<\/pre>\n<h3>CSS3 anim\u00e1cie<\/h3>\n<ul>\n<li><a class=\"ext\" title=\"http:\/\/cssload.net\/\" href=\"http:\/\/cssload.net\/\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/cssload.net\/<\/a><\/li>\n<li><a class=\"ext\" title=\"http:\/\/www.nikesh.me\/blog\/?s=css3+animation\" href=\"http:\/\/www.nikesh.me\/blog\/?s=css3+animation\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/www.nikesh.me\/blog\/?s=css3+animation<\/a><\/li>\n<li><a class=\"ext\" title=\"http:\/\/www.red-team-design.com\/css3-loading-animation-experiment\u00a0\" href=\"http:\/\/www.red-team-design.com\/css3-loading-animation-experiment%C2%A0\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/www.red-team-design.com\/css3-loading-animation-experiment\u00a0<\/a><\/li>\n<\/ul>\n<h4>Zmena prieh\u013eadnosti obr\u00e1zku po nabehnut\u00ed my\u0161i<\/h4>\n<pre>\/* css3 hover opacity *\/ \r\nimg { \r\n  -webkit-opacity: 0.5; \r\n  -moz-opacity: 0.5; \r\n  -ms-opacity: 0.5; \r\n  -o-opacity: 0.5; \r\n  opacity: 0.5; \r\n  -webkit-transition: all 1s ease; \r\n  -moz-transition: all 1s ease; \r\n  -ms-transition: all 1s ease; \r\n  -o-transition: all 1s ease; \r\n  transition: all 1s ease; \r\n} \r\nimg:hover { \r\n  -webkit-opacity: 1; \r\n  -moz-opacity: 1; \r\n  -ms-opacity: 1; \r\n  -o-opacity: 1; \r\n  opacity: 1; \r\n}<\/pre>\n<h3>Zmena prieh\u013eadnosti (prel\u00ednania) obsahovej \u010dasti pri na\u010d\u00edtan\u00ed str\u00e1nky<\/h3>\n<pre>\/* css3 transition fade-in efekt na str\u00e1nke load *\/ \r\n\/* Chrome a Safari, Firefox, IE, Opera, CSS3 browser *\/ \r\n@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;} } \r\n@-moz-keyframes fade\u00edn {from {opacity: 0;} to {opacity: 1;}} \r\n@-ms-keyframes fade\u00edn {from {opacity: 0;} to {opacity: 1;}} \r\n@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}} \r\n@keyframes fadein {from {opacity: 0;} to {opacity: 1;}} \r\n#section-content { \r\n\u00a0 \/* use animattion ease-in and repeat it only 1 time *\/ \r\n\u00a0 -webkit-animation: fadein 2s; \r\n\u00a0 -moz-animation: fade\u00edn 2s; \r\n\u00a0 -ms-animation: fade\u00edn 2s; \r\n\u00a0 -o-animation: fade\u00edn 2s; \r\n\u00a0 animation: fade\u00edn 2s; \r\n}<\/pre>\n<h3>Postupn\u00e1 zmena prieh\u013eadnosti odsekov po na\u010d\u00edtan\u00ed str\u00e1nky<\/h3>\n<pre>\/* css3 transition fade-in efekt na str\u00e1nke load *\/ \r\n\/* Chrome a Safari, Firefox, IE, Opera, CSS3 browser *\/ \r\n@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;} } \r\n@-moz-keyframes fade\u00edn {from {opacity: 0;} to {opacity: 1;}} \r\n@-ms-keyframes fade\u00edn {from {opacity: 0;} to {opacity: 1;}} \r\n@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}} \r\n@keyframes fade\u00edn {from {opacity: 0;} to {opacity: 1;}} \r\np { \r\n  \/* make invisible upon start *\/ \r\n  opacity: 0; \r\n  \/* use animattion ease-in and repeat it only 1 time *\/ \r\n  -webkit-animation: fadein ease-in 1; \r\n  -moz-animation: fadein ease-in 1; \r\n  -ms-animation: fade\u00edn ease-in 1; \r\n  -o-animation: fade\u00edn ease-in 1;\r\n  animation: fade\u00edn ease-in 1; \r\n  \/* tafter animation is done we remain at the last keyframe value (opacity: 1) *\/ \r\n  -webkit-animation-fill-mode: forwards; \r\n  -moz-animation-fill-mode: forwards; \r\n  -ms-animation-fill-mode: forwards; \r\n  -o-animation-fill-mode: forwards; \r\n  animation-fill-mode: forwards; \r\n  \/* duration *\/ \r\n  -webkit-animation-duration: 1s; \r\n  -moz-animation-duration: 1s; \r\n  -ms-animation-duration: 1s; \r\n  -o-animation-duration: 1s; \r\n  animation-duration: 1s; \r\n  \/* delay *\/ \r\n  -webkit-animation-delay: 0; \r\n\u00a0 -moz-animation-delay: 0; \r\n\u00a0 -ms-animation-delay: 0; \r\n\u00a0 -o-animation-delay: 0; \r\n\u00a0 animation-delay: 0;\r\n} \r\np.one { \r\n  -webkit-animation-delay: 0.7s; \r\n  -moz-animation-delay: 0.7s; \r\n  -ms-animation-delay: 0.7s; \r\n  -o-animation-delay: 0.7s; \r\n  animation-delay: 0.7s; \r\n} \r\np.two { \r\n  -webkit-animation-delay: 1.2s; \r\n  -moz-animation-delay:1.2s; \r\n  -ms-animation-delay:1.2s; \r\n  -o-animation-delay:1.2s; \r\n  animation-delay: 1.2s; \r\n} \r\np.three { \r\n  -webkit-animation-delay: 1.6s; \r\n  -moz-animation-delay: 1.6s; \r\n  -ms-animation-delay: 1.6s; \r\n  -o-animation-delay: 1.6s; \r\n  animation-delay: 1.6s; \r\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS3 prechody Original Hover Effects with CSS3 Transitions and Animations Syntax: transition: (str\u00e1\u017een\u00e9_vlastnosti) trvanie_anim\u00e1cie (funkcia_priebehu) (oneskorenie) (, \u010fal\u0161ie_prechody); CSS3 transform\u00e1cia Rot\u00e1cia, zv\u00e4\u010d\u0161enie a zmena prieh\u013eadnosti pri nabehnut\u00ed my\u0161ou: .thumbs { opacity: 0; transform: rotateY(180deg) scale(0.5, 0.5); transition: all 450ms ease-out 0s; } .thumbs:hover { \u00a0\u00a0opacity: 1; transform: rotateY(0deg) scale(1, 1); } CSS3 anim\u00e1cie http:\/\/cssload.net\/ http:\/\/www.nikesh.me\/blog\/?s=css3+animation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-291","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=291"}],"version-history":[{"count":4,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/291\/revisions"}],"predecessor-version":[{"id":295,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/291\/revisions\/295"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}