CSS ﯼﺎﻫ ﻦﺸﯿﻤﯿﻧﺍ

فهرست مطالب

    نمایش فهرست مطالب

CSS ﯼﺎﻫ ﻦﺸﯿﻤﯿﻧﺍ

CSS ﺮﺻﺎﻨﻋ ﯼﺯﺎﺳ ﻦﺸﯿﻤﯿﻧﺍ ﻥﺎﮑﻣﺍ HTML ﺪﻨﮐ ﯽﻣ ﻢﻫﺍﺮﻓ ﺶﻠﻓ ﺎﯾ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

CSS

:ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﯾﺯ ﺹﺍﻮﺧ ﺎﺑ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

ﺎﻫ ﻦﺸﯿﻤﯿﻧﺍ ﯼﺍﺮﺑ ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

.ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯽﮔﮋﯾﻭ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ

Property
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

؟ﺖﺴﯿﭼ CSS ﯼﺎﻫ ﻦﺸﯿﻤﯿﻧﺍ

.ﺪﻨﮐ ﺮﯿﯿﻐﺗ ﺮﮕﯾﺩ ﮏﺒﺳ ﻪﺑ ﮏﺒﺳ ﮏﯾ ﺯﺍ ﺞﯾﺭﺪﺗ ﻪﺑ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﻦﺸﯿﻤﯿﻧﺍ ﮏ

.ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﻪﮐ ﺍﺭ CSS ﯽﮔﮋﯾﻭ ﺪﻨﭼ ﺮﻫ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﺎﻤﺷ

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﻥﺁ ﯼﺍﺮﺑ ﯼﺪﯿﻠﮐ ﻢﯾﺮﻓ ﺪﻨﭼ ﺪﯾﺎﺑ ﺍﺪﺘﺑﺍ ،CSS ﻦﺸﯿﻤﯿﻧﺍ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ

.ﺖﺷﺍﺩ ﺪﻫﺍﻮﺧ ﯽﯾﺎﻫﮏﺒﺳ ﻪﭼ ﺹﺎﺧ ﯼﺎﻫﻥﺎﻣﺯ ﺭﺩ ﺮﺼﻨﻋ ﻪﮐ ﺪﻨﻫﺩﯽﻣ ﻥﺎﺸﻧ ﯼﺪﯿﻠﮐ

keyframes@ ﻥﻮﻧﺎﻗ

.ﺪﯿﻨﮐﯽﻣ ﺺﺨﺸﻣ @keyframes ﺭﺩ ﺍﺭ CSS ﯼﺎﻫu20

.ﺪﯿﻨﮐ ﻞﺼﺘﻣ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ ﺪﯾﺎﺑ ،ﺪﻨﮐ ﺭﺎﮐ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻪﮑﻨﯾﺍ ﯼﺍﺮﺑ

.ﺪﻨﮐ ﯽﻣ ﻞﺼﺘﻣ <div> ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ "example" ﻦﺸﯿﻤﯿﻧﺍ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

/* The animation code */
@keyframes example {
  from {background-color: red;}
   
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  
background-color: red;	animation-name: example;
  animation-duration: 4s;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ animation-duration

ﺪﻨﮐ ﯽﻣ ﺮﯿﯿﻐﺗ ﻞﯾﺎﺘﺳﺍ ﯽﻧﺎﻣﺯ ﻪﭼ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻪﮐ ﻢﯾﺍ ﻩﺩﺮﮐ ﺺﺨﺸﻣ ﻻﺎﺑ ﻝﺎﺜﻣ ﺭﺩ

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﺍﺪﻌﺗ ﻥﺎﻤﻫ ﻪﺑ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ،ﺪﺻﺭﺩ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ .ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺰﯿﻧ ﺪﺻﺭﺩ ﺯﺍ

ﺪﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ <div> ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

/* The animation code */
@keyframes example
{
  0%   {background-color: red;}
   
25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

ﺪﻫﺩﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ <div> ﺖﯿﻌﻗﻮﻣ ﻢﻫ ﻭ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ ﻢﻫ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

/* The animation code */
@keyframes example
{
  0%   {background-color:red; left:0px; top:0px;}
   
25%  {background-color:yellow; left:200px; top:0px;}
   
50%  {background-color:blue; left:200px; top:200px;}
   
75%  {background-color:green; left:0px; top:200px;}
   
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻦﺘﺧﺍﺪﻧﺍ ﺮﯿﺧﺎﺗ ﻪﺑ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻉﻭﺮﺷ ﯼﺍﺮﺑ ﺍﺭ ﯼﺮﯿﺧﺎﺗ animatio

:ﺩﺭﺍﺩ ﻦﺸﯿﻤﯿﻧﺍ ﻉﻭﺮﺷ ﺯﺍ ﻞﺒﻗ ﺮﯿﺧﺎﺗ ﻪﯿﻧﺎﺛ 2 ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
    
animation-duration: 4s;
  animation-delay: 2s;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>

ﻦﺸﯿﻤﯿﻧﺍ ،ﯽﻔﻨﻣ ﺮﯾﺩﺎﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺕﺭﻮﺻ ﺭﺩ .ﺖﺳﺍ ﺯﺎﺠﻣ ﺰﯿﻧ ﯽﻔﻨﻣ ﺮﯾﺩﺎﻘﻣ

ﺖﺳﺍ ﻩﺩﻮﺑ ﻼًﺒﻗ ﺭﺎﮕﻧﺍ ﻪﮐ ﺩﻮﺷﯽﻣ ﻉﻭﺮﺷ ﯼﺍﻪﻧﻮﮔ ﻪﺑ ﻦﺸﯿﻤﯿﻧﺍ ،ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ

ﻝﺎﺜﻣ

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-delay: -2s;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>

ﺩﻮﺷ ﺍﺮﺟﺍ ﺭﺎﺑ ﺪﻨﭼ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻪﮐ ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺩﻮﺷ ﺍﺮﺟﺍ ﺪﯾﺎﺑ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻪﮐ ﺍﺭ ﯽﺗﺎﻌﻓﺩ ﺩﺍﺪﻌﺗ

ﻝﺎﺜﻣ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>

ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻦﺸﯿﻤﯿﻧﺍ ﺖﺧﺎﺳ ﯼﺍﺮﺑ "ﺖﯾﺎﻬﻧ ﯽﺑ" ﺭﺍﺪﻘﻣ ﺯﺍ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
    animation-iteration-count: 
infinite;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺮﺟﺍ ﻦﯾﺰﮕﯾﺎﺟ ﯼﺎﻫ ﻪﺧﺮﭼ ﺎﯾ ﺱﻮﮑﻌﻣ ﺖﻬﺟ ﺭﺩ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ animation-direction ﯽﮔﮋﯾﻭ

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺍﺭ ﺮﯾﺯ ﺮﯾﺩﺎﻘﻣ ﺪﻧﺍﻮﺗ ﯽﻣ animation-direction ﯽﮔﮋﯾﻭ

normal

ﺖﺳﺍ ﺽﺮﻓ ﺶﯿﭘ ﻦﯾﺍ .ﺩﻮﺷ ﯽﻣ ﺶﺨﭘ (ﺩﺭﺍﻭﺮﻓ) ﯽﻟﻮﻤﻌﻣ ﺕﺭﻮﺻ ﻪﺑ ﻦﺸﯿﻤﯿﻧﺍ -

reverse

ﺩﻮﺷ ﯽﻣ ﺶﺨﭘ (ﺐﻘﻋ) ﺱﻮﮑﻌﻣ ﺖﻬﺟ ﺭﺩ ﻦﺸﯿﻤﯿﻧﺍ -

alternate

ﺩﻮﺷ ﯽﻣ ﺶﺨﭘ ﺐﻘﻋ ﻪﺑ ﺲﭙﺳ ﻭ ﻮﻠﺟ ﻪﺑ ﺍﺪﺘﺑﺍ ﻦﺸﯿﻤﯿﻧﺍ -

alternate-reverse

ﺩﻮﺷ ﯽﻣ ﺶﺨﭘ ﻮﻠﺟ ﻪﺑ ﺲﭙﺳ ﻭ ﺐﻘﻋ ﻪﺑ ﺍﺪﺘﺑﺍ ﻦﺸﯿﻤﯿﻧﺍ -

:ﺪﻨﮐ ﯽﻣ ﺍﺮﺟﺍ (ﺐﻘﻋ) ﺱﻮﮑﻌﻣ ﺖﻬﺟ ﺭﺩ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-direction: 
reverse;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>

ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻦﺸﯿﻤﯿﻧﺍ ﺖﺧﺎﺳ ﯼﺍﺮﺑ "alternate" ﺭﺍﺪﻘﻣ ﺯﺍ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>

ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻦﺸﯿﻤﯿﻧﺍ ﺖﺧﺎﺳ ﯼﺍﺮﺑ "alternate-reverse" ﺭﺍﺪﻘﻣ ﺯﺍ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div {
  width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate-reverse;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ ﺖﻋﺮﺳ ﯽﻨﺤﻨﻣ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺖﻋﺮﺳ ﯽﻨﺤﻨﻣ animation-timing-function

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺍﺭ ﺮﯾﺯ ﺮﯾﺩﺎﻘﻣ ﺪﻧﺍﻮﺗ ﯽﻣ animation-timing-function ﯽﮔﮋﯾﻭ

ease

(ﺖﺳﺍ ﺽﺮﻓ ﺶﯿﭘ ﻦﯾﺍ) ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﻪﺘﺴﻫﺁ ﻥﺎﯾﺎﭘ ﺲﭙﺳ ﻭ ﻊﯾﺮﺳ ﺲﭙﺳ ،ﻪﺘﺴﻫﺁ ﻉﻭﺮﺷ ﺎﺑ ﺍﺭ ﻦﺸﯿ

linear

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺎﻬﺘﻧﺍ ﺎﺗ ﺍﺪﺘﺑﺍ ﺯﺍ ﺖﻋﺮﺳ ﻥﺎﻤﻫ ﺎﺑ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ -

ease-in

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﺘﺴﻫﺁ ﻉﻭﺮﺷ ﺎﺑ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ -

ease-out

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﺘﺴﻫﺁ ﻥﺎﯾﺎﭘ ﺎﺑ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ -

ease-in-out

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺪﻨﮐ ﻥﺎﯾﺎﭘ ﻭ ﻉﻭﺮﺷ ﺎﺑ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ -

cubic-bezier(n,n,n,n)

ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺮﯾﺰﯿﺑ-ﺐﻌﮑﻣ ﻊﺑﺎﺗ ﮏﯾ ﺭﺩ ﺍﺭ ﺩﻮﺧ ﺮﯾﺩﺎﻘﻣ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ -

:ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻬﻧﺁ ﺯﺍ ﻥﺍﻮﺗ ﯽﻣ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻒﻠﺘﺨﻣ ﺖﻋﺮﺳ ﯼﺎﻫ ﯽﻨﺤﻨﻣ ﺯﺍ ﯽﺧﺮﺑ ﺮﯾ

ﻝﺎﺜﻣ

#div1 {animation-timing-function: linear;}
#div2 
{animation-timing-function: ease;}
#div3 {animation-timing-function: 
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 
{animation-timing-function: ease-in-out;}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﻦﺸﯿﻤﯿﻧﺍ ﯼﺍﺮﺑ ﺍﺭ ﻥﺩﺮﮐ ﺮﭘ ﺖﻟﺎﺣ

ﺪﻧﺭﺍﺬﮔﯽﻤﻧ ﺮﯿﺛﺄﺗ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﯼﺪﯿﻠﮐ ﻢﯾﺮﻓ ﻦﯿﻟﻭﺍ ﺶﺨﭘ ﺯﺍ ﻞﺒﻗ CSS ﯼﺎﻫﻦﺸﯿﻤﯿ

ﮏﯾ animation-fill-mode ﯽﮔﮋﯾﻭ

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺍﺭ ﺮﯾﺯ ﺮﯾﺩﺎﻘﻣ ﺪﻧﺍﻮﺗ ﯽﻣ animation-fill-mode ﯽﮔﮋﯾﻭ

none

ﺩﺮﮐ ﺪﻫﺍﻮﺨﻧ ﻝﺎﻤﻋﺍ ﺮﺼﻨﻋ ﻪﺑ ﺍﺮﺟﺍ ﺯﺍ ﺪﻌﺑ ﺎﯾ ﻞﺒﻗ ﺍﺭ ﯽﮑﺒﺳ ﭻﯿﻫ ﻦﺸﯿﻤﯿﻧﺍ .ﺽﺮﻓ ﺶﯿﭘ ﺭﺍﺪﻘﻣ

forwards

(ﺩﺭﺍﺩ ﺩﺍﺪﻌﺗ-ﺭﺍﺮﮑﺗ-ﻦﺸﯿﻤﯿﻧﺍ ﻭ ﺖﻬﺟ-ﻦﺸﯿﻤﯿﻧﺍ ﻪﺑ ﯽﮕﺘﺴﺑ) ﺪﻨﮐ ﯽﻣ ﻆﻔﺣ ﺍﺭ ﯼﺪﯿﻠﮐ ﻢﯾﺮﻓ ﻦﯾﺮ

backwards

.ﺪﻨﮐ ﯽﻣ ﻆﻔﺣ ﻦﺸﯿﻤﯿﻧﺍ ﺮﯿﺧﺎﺗ ﻩﺭﻭﺩ ﻝﻮﻃ ﺭﺩ ﺍﺭ ﺭﺍﺪﻘﻣ ﻦﯾﺍ ﻭ (ﺩﺭﺍﺩ ﻦﺸﯿﻤﯿﻧﺍ ﺖﻬﺟ ﻪﺑ ﯽﮕﺘﺴ

both

.ﺪﻫﺩ ﯽﻣ ﺵﺮﺘﺴﮔ ﺖﻬﺟ ﻭﺩ ﺮﻫ ﺭﺩ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻭ ﺪﻨﮐ ﯽﻣ ﯼﻭﺮﯿﭘ ﺐﻘﻋ ﻭ ﻮﻠﺟ ﻪﺑ ﻭﺭ

ﺪﻨﮐ ﻆﻔﺣ ﺍﺭ ﮏﺒﺳ ﺮﯾﺩﺎﻘﻣ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ <div> ﺮﺼﻨﻋ ﻪﺑ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
    animation-fill-mode: forwards;
  }

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

ﺪﻨﮐ ﺖﻓﺎﯾﺭﺩ ﺍﺭ ﻂﺳﻮﺗ ﻩﺪﺷ ﻢﯿﻈﻨﺗ ﮏﺒﺳ ﺮﯾﺩﺎﻘﻣ ﺎﺗ ﺪﻫﺩﯽﻣ ﻩﺯﺎﺟﺍ <div> ﺮﺼﻨﻋ ﻪﺑ ﺮﯾﺯ

ﻝﺎﺜﻣ

 div {
  width: 100px;
  height: 100px;
  
  background: red;
  position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: backwards;
  }

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>

ﺪﻨﮐ ﺖﻓﺎﯾﺭﺩ ﺍﺭ ﻩﺪﺷ ﻢﯿﻈﻨﺗ ﮏﺒﺳ ﺮﯾﺩﺎﻘﻣ ﺪﻫﺩﯽﻣ ﻩﺯﺎﺟﺍ <div> ﺮﺼﻨﻋ ﻪﺑ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

 div {
  width: 100px;
  height: 100px;
  background: red;
    position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: both;
  }

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

ﻦﺸﯿﻤﯿﻧﺍ ﯽﺴﯾﻮﻧ ﻩﺎﺗﻮﮐ ﯽﮔﮋﯾﻭ

:ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻦﺸﯿﻤﯿﻧﺍ ﯽﮔﮋﯾﻭ ﺶﺷ ﺯﺍ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div
{	animation-name: example;
   
animation-duration: 5s;
   
animation-timing-function: linear;
   
animation-delay: 2s;
   
animation-iteration-count: infinite;
   
animation-direction: alternate;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>

ﺖﻓﺎﯾ ﺖﺳﺩ ﻕﻮﻓ ﻦﺸﯿﻤﯿﻧﺍ ﺖﮑﻓﺍ ﻥﺎﻤﻫ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﯽﺴﯾﻮﻧ ﻩﺎﺗﻮﮐ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ

ﻝﺎﺜﻣ

div
{
    animation: example 5s linear 2s infinite alternate;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>

CSS ﻦﺸﯿﻤﯿﻧﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

:ﺪﻨﮐﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ CSS ﻦﺸﯿﻤﯿﻧﺍ ﯼﺎﻫﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻭ @keyframes ﻥﻮﻧﺎﻗ ﺮﯾﺯ ﻝﻭﺪ

@keyframes

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ ﺪﮐ

animation

ﻦﺸﯿﻤﯿﻧﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

animation-delay

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻉﻭﺮﺷ ﯼﺍﺮﺑ ﺮﯿﺧﺎﺗ ﮏﯾ

animation-direction

ﺩﻮﺷ ﺶﺨﭘ ﺐﻘﻋ ﺎﯾ ﺐﻘﻋ ،ﻮﻠﺟ ﻪﺑ ﺪﯾﺎﺑ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

animation-duration

ﺪﻨﮐ ﻞﻣﺎﮐ ﺍﺭ ﻪﺧﺮﭼ ﮏﯾ ﺎﺗ ﺪﺸﮐ ﯽﻣ ﻝﻮﻃ ﺭﺪﻘﭼ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

animation-fill-mode

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺮﺼﻨﻋ ﯼﺍﺮﺑ ﺍﺭ ﮏﺒﺳ ﮏﯾ ،ﺖﺴﯿﻧ ﺶﺨﭘ ﻝﺎﺣ ﺭﺩ ﻦﺸﯿﻤﯿﻧﺍ ﻪﮐ ﯽﻧﺎﻣﺯ

animation-iteration-count

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺩﻮﺷ ﺶﺨﭘ ﺪﯾﺎﺑ ﻦﺸﯿﻤﯿﻧﺍ ﮏﯾ ﻪﮐ ﯽﺗﺎﻌﻓﺩ ﺩﺍﺪﻌﺗ

animation-name

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ keyframes@ ﻦﺸﯿﻤﯿﻧﺍ ﻡﺎﻧ

animation-play-state

ﺖﺳﺍ ﻒﻗﻮﺗ ﺎﯾ ﺍﺮﺟﺍ ﻝﺎﺣ ﺭﺩ ﻦﺸﯿﻤﯿﻧﺍ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

animation-timing-function

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺸﯿﻤﯿﻧﺍ ﺖﻋﺮﺳ ﯽﻨﺤﻨﻣ

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024