{"id":1628,"date":"2021-11-19T20:08:48","date_gmt":"2021-11-19T16:38:48","guid":{"rendered":"https:\/\/behnudi.ir\/?p=1628"},"modified":"2025-01-25T19:43:13","modified_gmt":"2025-01-25T16:13:13","slug":"web28-animation","status":"publish","type":"post","link":"https:\/\/behnudi.ir\/?p=1628","title":{"rendered":"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628: \u06f8- \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646"},"content":{"rendered":"<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 CSS \u0627\u0645\u06a9\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0627\u0644\u0645\u0646\u062a \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u0639\u06cc\u0646 \u0648 \u0628\u0627 \u0633\u0631\u0639\u062a \u062f\u0644\u062e\u0648\u0627\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.<!--more--><\/p>\n<p>\u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 CSS \u0646\u0633\u0628\u062a \u0628\u0647 \u062c\u0627\u0648\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n<ul>\n<li>\u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u0646 \u062c\u0627\u0648\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u06cc\u0633\u062a.<\/li>\n<li>\u0628\u0627 \u0644\u06af \u06a9\u0645\u062a\u0631\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. (\u062d\u062a\u06cc \u062f\u0631 \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\u0647\u0627\u06cc \u0636\u0639\u06cc\u0641)<\/li>\n<\/ul>\n<p>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 CSS \u062f\u0648 \u0628\u062e\u0634 \u062f\u0627\u0631\u062f.<\/p>\n<ul>\n<li>\u062a\u0639\u0631\u06cc\u0641<\/li>\n<li>\u06a9\u0627\u0631\u0628\u0631\u062f<\/li>\n<\/ul>\n<h3>\u062a\u0639\u0631\u06cc\u0641 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646<\/h3>\n<p>\u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u0646\u0627\u0645 \u0628\u0647 \u0622\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0633\u067e\u0633 \u06af\u0627\u0645\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u0634\u0648\u062f.\u00a0\u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0647 \u0646\u0627\u0645 to-circle \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0648 \u06af\u0627\u0645\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0646\u06cc\u0632 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n@keyframes to-circle {\r\n\t0% {\r\n\t\tborder-radius:0%;\r\n\t}\r\n\t20% {\r\n\t\tborder-radius:10%;\r\n\t}\r\n\t40% {\r\n\t\tborder-radius:20%;\r\n\t}\r\n\t60% {\r\n\t\tborder-radius:30%;\r\n\t}\r\n\t80% {\r\n\t\tborder-radius:40%;\r\n\t}\r\n\t100% {\r\n\t\tborder-radius:50%;\r\n\t}\r\n}\r\n\r\n<\/code><\/pre>\n<ul>\n<li>\u0646\u0627\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646<\/li>\n<li>\u06af\u0627\u0645\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646<\/li>\n<li>\u067e\u0631\u0627\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u0647\u0631 \u06af\u0627\u0645<\/li>\n<\/ul>\n<p>\u062f\u0631 \u062a\u0639\u06cc\u06cc\u0646 \u06af\u0627\u0645\u200c\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062c\u0627\u06cc 0% \u0627\u0632 from \u0648 \u0628\u062c\u0627\u06cc 100% \u0627\u0632 to \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3>\u067e\u0631\u0627\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646<\/h3>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0686\u0646\u062f \u067e\u0631\u0627\u067e\u0631\u062a\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<ul dir=\"ltr\">\n<li>animation-name<\/li>\n<li>animation-duration<\/li>\n<li>animation-timing-function<\/li>\n<li>animation-delay<\/li>\n<li>animation-iteration-count<\/li>\n<li>animation-direction<\/li>\n<li>animation-fill-mode<\/li>\n<li>animation-play-state<\/li>\n<\/ul>\n<h4>animation-name<\/h4>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u0631\u0627\u00a0 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n@keyframes zoom-in {\r\n\tfrom {\r\n\t  opacity: 0;\r\n\t  transform: scale(0.2, 0.2);\r\n\t}\r\n\tto {\r\n\t  opacity: 1;\r\n\t}\r\n}\r\nimg {\r\n\tanimation-name: zoom-in;\r\n}\r\nimg:active {\r\n\tanimation-name: none;\r\n}\r\n\r\n<\/code><\/pre>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/01\/\" width=\"440\" height=\"440\"><\/iframe><\/p>\n<div style=\"text-align: center;\">\u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/div>\n<h4>animation-duration<\/h4>\n<p>\u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f. \u0648\u0627\u062d\u062f \u0632\u0645\u0627\u0646 s \u0628\u0631\u0627\u06cc \u062b\u0627\u0646\u06cc\u0647 \u06cc\u0627 ms \u0628\u0631\u0627\u06cc \u0645\u06cc\u0644\u06cc \u062b\u0627\u0646\u06cc\u0647 \u0628\u0627\u06cc\u062f \u062d\u062a\u0645\u0627 \u0646\u0648\u0634\u062a\u0647 \u0634\u0648\u062f. \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0635\u0641\u0631 \u0627\u0633\u062a.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/02\/\" width=\"500\" height=\"500\"><\/iframe><\/p>\n<h4>animation-timing-function<\/h4>\n<p>\u062a\u0627\u0628\u0639\u06cc \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u06a9\u0645\u06a9 \u0622\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u06cc\u0627\u0646\u06cc \u067e\u0631\u0627\u067e\u0631\u062a\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/03\/\" width=\"500\" height=\"500\"><\/iframe><\/p>\n<h4>animation-delay<\/h4>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0686\u0642\u062f\u0631 \u0628\u0627\u06cc\u062f \u0645\u0646\u062a\u0638\u0631 \u0645\u0627\u0646\u062f. \u0648\u0627\u062d\u062f \u0632\u0645\u0627\u0646 s \u0628\u0631\u0627\u06cc \u062b\u0627\u0646\u06cc\u0647 \u06cc\u0627 ms \u0628\u0631\u0627\u06cc \u0645\u06cc\u0644\u06cc \u062b\u0627\u0646\u06cc\u0647 \u0628\u0627\u06cc\u062f \u062d\u062a\u0645\u0627 \u0646\u0648\u0634\u062a\u0647 \u0634\u0648\u062f. \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0635\u0641\u0631 \u0627\u0633\u062a.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/04\/\" width=\"500\" height=\"500\"><\/iframe><\/p>\n<h4>animation-iteration-count<\/h4>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0686\u0646\u062f \u0628\u0627\u0631 \u062a\u06a9\u0631\u0627\u0631 \u0634\u0648\u062f. \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u06cc\u06a9\u0628\u0627\u0631 \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u067e\u06cc\u0648\u0633\u062a\u0647 \u062a\u06a9\u0631\u0627\u0631 \u0634\u0648\u062f\u060c \u0645\u0642\u062f\u0627\u0631 infinity \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631 \u0628\u0631\u06cc\u062f.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/05\/\" width=\"500\" height=\"500\"><\/iframe><\/p>\n<h4>animation-direction<\/h4>\n<p>\u062c\u0647\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u0632 \u0622\u063a\u0627\u0632 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u06cc\u0627 \u0639\u06a9\u0633 \u0622\u0646.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/06\/\" width=\"500\" height=\"500\"><\/iframe><\/p>\n<h4>animation-fill-mode<\/h4>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0642\u0628\u0644 \u0648 \u0628\u0639\u062f \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0644\u0645\u0646\u062a \u0628\u0647 \u0686\u0647 \u0635\u0648\u0631\u062a\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/07\/\" width=\"500\" height=\"500\"><\/iframe><\/p>\n<h4>animation-play-state<\/h4>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f \u06cc\u0627 \u0645\u0648\u0642\u062a\u0627 \u0645\u062a\u0648\u0642\u0641 \u0634\u0648\u062f.<\/p>\n<h4><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/08\/\" width=\"500\" height=\"500\"><\/iframe><br \/>\n\u062f\u0633\u062a\u0648\u0631 \u062e\u0644\u0627\u0635\u0647<\/h4>\n<p>\u0647\u0645\u0647 \u062f\u0633\u062a\u0648\u0631\u0647\u0627\u06cc \u0628\u0627\u0644\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u062e\u0644\u0627\u0635\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre dir=\"ltr\">animation: name duration timing-function delay iteration-count direction fill-mode play-state;<\/pre>\n<h3>\u0645\u062b\u0627\u0644<\/h3>\n<p>Flash<\/p>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n@keyframes flash {\r\n\t0%,50%,100%  {\r\n\t\topacity: 1;\r\n\t}\r\n\t25%,75%  {\r\n\t\topacity: 0.5;\r\n\t}\r\n}\r\n\r\n.item {\r\n\tanimation-name: flash;\r\n\tanimation-duration: 1s;\r\n}\r\n\r\n.item:active {\r\n\tanimation-name: none;\r\n}\r\n\r\n<\/code><\/pre>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/11\/\" width=\"440\" height=\"440\"><\/iframe><\/p>\n<h3>\u0645\u062b\u0627\u0644<\/h3>\n<p>Square to Circle<\/p>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n@keyframes square-to-circle {\r\n\t0%  {\r\n\t\tborder-radius:0 0 0 0;\r\n\t\tbackground: #4285F4;\r\n\t\ttransform: rotate(0deg);\r\n\t}\r\n\t25%  {\r\n\t\tborder-radius:50% 0 0 0;\r\n\t\tbackground: #FBBC05;\r\n\t\ttransform: rotate(45deg);\r\n\t}\r\n\t50%  {\r\n\t\tborder-radius:50% 50% 0 0;\r\n\t\tbackground: #34A853;\r\n\t\ttransform: rotate(90deg);\r\n\t}\r\n\t75%  { \r\n\t\tborder-radius:50% 50% 50% 0;\r\n\t\tbackground: #EA4335;\r\n\t\ttransform: rotate(135deg);\r\n\t}\r\n\t100% {  \r\n\t\tborder-radius:50% 50% 50% 50%;\r\n\t\tbackground: #000000;\r\n\t\ttransform: rotate(180deg);\r\n\t}\r\n}\r\n.item {\r\n\tanimation: square-to-circle 2s .5s infinite cubic-bezier(1,.15,.3,1.35) alternate;\r\n}\r\n\r\n<\/code><\/pre>\n<p><iframe loading=\"lazy\" src=\"https:\/\/behnudi.ir\/f\/web2\/08\/12\/\" width=\"440\" height=\"440\"><\/iframe><\/p>\n<h4>\u062a\u0645\u0631\u06cc\u0646 \u06f1<\/h4>\n<ul>\n<li>\u0627\u06cc\u0646\u00a0<a href=\"https:\/\/behnudi.ir\/f\/web2\/08\/08-1.zip\">\u0641\u0627\u06cc\u0644<\/a> \u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0622\u0646 \u0631\u0627 \u062f\u0631 \u0641\u0648\u0644\u062f\u0631 web2 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u062f\u0631 \u0641\u0627\u06cc\u0644 CSS \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u0628\u062f\u0647\u06cc\u062f \u062a\u0627 \u0647\u0645\u0627\u0646\u0646\u062f \u0648\u06cc\u062f\u06cc\u0648\u06cc \u0632\u06cc\u0631 \u0634\u0648\u062f.<\/li>\n<\/ul>\n<p><video controls=\"controls\" width=\"300\" height=\"150\"><source src=\"https:\/\/behnudi.ir\/f\/web2\/08\/img\/08-1.mp4\" \/>Your browser does not support the video tag.<\/video><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 CSS \u0627\u0645\u06a9\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0627\u0644\u0645\u0646\u062a \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u0639\u06cc\u0646 \u0648 \u0628\u0627 \u0633\u0631\u0639\u062a \u062f\u0644\u062e\u0648\u0627\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n","protected":false},"author":1,"featured_media":1613,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[44],"class_list":["post-1628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer-science","tag-web-design"],"_links":{"self":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/posts\/1628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1628"}],"version-history":[{"count":0,"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/posts\/1628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/media\/1613"}],"wp:attachment":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}