CSS ﻝﺎﻘﺘﻧﺍ

فهرست مطالب

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

CSS ﻝﺎﻘﺘﻧﺍ

.ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﻦﯿﻌﻣ ﻥﺎﻣﺯ ﺕﺪﻣ ﺭﺩ ،ﯽﻣﺍﺭﺁ ﻪﺑ ﺍﺭ ﯽﮔﮋﯾﻭ ﺮﯾﺩﺎﻘﻣ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ

ﻝﺎﻘﺘﻧﺍ ﻩﻮﻠﺟ ﺎﺗ ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺮﯾﺯ ﺮﺼﻨﻋ ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ CSS ﺪﯿﻨﯿﺒﺑ ﺍﺭ:

CSS

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

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

ﻝﺎﻘﺘﻧﺍ ﯼﺍﺮﺑ ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

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

Property
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

؟ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ CSS Transitions ﺯﺍ ﻪﻧﻮﮕﭼ

:ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﺰﯿﭼ ﻭﺩ ﺪﯾﺎﺑ ،ﻝﺎﻘﺘﻧﺍ ﺖﮑﻓﺍ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ

  • ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺖﮑﻓﺍ ﻥﺁ ﻪﺑ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﻪﮐ CSS ﯽﮔﮋﯾﻭ

  • ﺮﺛﺍ ﻥﺎﻣﺯ ﺕﺪﻣ

ﻪﺟﻮﺗ: ﺶﯿﭘ ﺭﺍﺪﻘﻣ ﺍﺮﯾﺯ ،ﺖﺷﺍﺩ ﺪﻫﺍﻮﺨﻧ ﯼﺮﺛﺍ ﻝﺎﻘﺘﻧﺍ ،ﺪﺷﺎﺑ ﻩﺪﺸﻧ ﺺﺨﺸﻣ ﻥﺎﻣﺯ ﺕﺪﻣ

<div> .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ <div> ﺰﻣﺮﻗ 100px * 100px ﺮﺼﻨﻋ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div
{
  width: 100px;
  height: 100px;
  
background: red;
  transition: width 2s;
}

.ﺪﻫﺩ ﺭﺍﺪﻘﻣ ﺮﯿﯿﻐﺗ CSS ﻩﺪﺷ ﺺﺨﺸﻣ (ﺽﺮﻋ) ﺖﯿﺻﺎﺧ ﻪﮐ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﯽﻧﺎﻣﺯ ﺭﺍﺬﮔ ﺮﺛﺍ

:ﻢﯿﻨﮐ ﺺﺨﺸﻣ width ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﯼﺪﯾﺪﺟ ﺭﺍﺪﻘﻣ ،ﺩﺮﯿﮔﯽﻣ ﺭﺍﺮﻗ <div> ﺮﺼﻨﻋ ﯼﻭﺭ ﺮﺑﺭﺎﮐ

ﻝﺎﺜﻣ

div:hover
{
  width: 300px;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

.ﺩﺩﺮﮔ ﯽﻣ ﺯﺎﺑ ﺩﻮﺧ ﯽﻠﺻﺍ ﮏﺒﺳ ﻪﺑ ﺞﯾﺭﺪﺗ ﻪﺑ ،ﺩﻮﺷ ﯽﻣ ﺝﺭﺎﺧ ﺮﺼﻨﻋ ﺯﺍ ﺎﻤﻧ ﻥﺎﮑﻣ ﯽﺘﻗﻭ ﻪﮐ ﺪﯿ

ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﯽﮔﮋﯾﻭ ﺵﺯﺭﺍ ﻦﯾﺪﻨﭼ

ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﻥﺎﻣﺯ ﺕﺪﻣ ﺎﺑ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ ﯽﮔﮋﯾﻭ ﻭﺩ ﺮﻫ ﯼﺍﺮﺑ ﻝﺎﻘﺘﻧﺍ ﺖﮑﻓﺍ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div
{
  transition: width 2s, height 4s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﻝﺎﻘﺘﻧﺍ ﺖﻋﺮﺳ ﯽﻨﺤﻨﻣ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺭﺍﺬﮔ ﺮﺛﺍ ﺖﻋﺮﺳ ﯽﻨﺤﻨﻣ transition-timin

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

ease

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

linear

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

ease-in

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﺘﺴﻫﺁ ﻉﻭﺮﺷ ﺎﺑ ﺭﺍﺬﮔ ﺮﺛﺍ ﮏﯾ -

ease-out

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﺘﺴﻫﺁ ﻥﺎﯾﺎﭘ ﺎﺑ ﺭﺍﺬﮔ ﺮﺛﺍ ﮏﯾ -

ease-in-out

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﺘﺴﻫﺁ ﻥﺎﯾﺎﭘ ﻭ ﻉﻭﺮﺷ ﺎﺑ ﻝﺎﻘﺘﻧﺍ ﺖﮑﻓﺍ ﮏﯾ -

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

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

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

ﻝﺎﺜﻣ

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

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

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

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

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

</body>
</html>

ﺭﺍﺬﮔ ﺮﺛﺍ ﺮﯿﺧﺄﺗ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺭﺍﺬﮔ ﺮﺛﺍ ﯼﺍﺮﺑ ﺍﺭ (ﻪﯿﻧﺎﺛ ﺐﺴﺣ ﺮﺑ) ﺮﯿﺧﺄﺗ t

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

ﻝﺎﺜﻣ

div {
  
transition-delay: 1s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

ﯽﻧﻮﮔﺮﮔﺩ + ﻝﺎﻘﺘﻧﺍ

:ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﻞﯾﺪﺒﺗ ﻪﺑ ﺭﺍﺬﮔ ﺮﺛﺍ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

div {
  transition: 
width 2s, height 2s, transform 2s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

ﺮﺘﺸﯿﺑ ﻝﺎﻘﺘﻧﺍ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

:ﺮﯾﺯ ﺪﻨﻧﺎﻣ ،ﺩﺮﮐ ﺺﺨﺸﻣ ﯽﮑﯾ ﯽﮑﯾ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ CSS ﻝﺎﻘﺘﻧﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

ﻝﺎﺜﻣ

div
{
  transition-property: width;
   
transition-duration: 2s;
   
transition-timing-function: linear;
  transition-delay: 1s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

:transition ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺎﯾ

ﻝﺎﺜﻣ

div
{
   
transition: width 2s linear 1s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

CSS ﻝﺎﻘﺘﻧﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

:ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ CSS ﻝﺎﻘﺘﻧﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﻭﺪﺟ

transition

ﺪﺣﺍﻭ ﯽﮔﮋﯾﻭ ﮏﯾ ﻪﺑ ﻝﺎﻘﺘﻧﺍ ﯽﮔﮋﯾﻭ ﺭﺎﻬﭼ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

transition-delay

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺭﺍﺬﮔ ﺮﺛﺍ ﯼﺍﺮﺑ ﺍﺭ (ﻪﯿﻧﺎﺛ ﺐﺴﺣ ﺮﺑ) ﺮﯿﺧﺄﺗ

transition-duration

ﺩﻮﺷ ﻞﻣﺎﮐ ﺎﺗ ﺪﺸﮐ ﯽﻣ ﻝﻮﻃ ﻪﯿﻧﺎﺛ ﯽﻠﯿﻣ ﺎﯾ ﻪﯿﻧﺎﺛ ﺪﻨﭼ ﺭﺍﺬﮔ ﺮﺛﺍ ﮏﯾ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

transition-property

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺖﺳﺍ ﻥﺁ ﯼﺍﺮﺑ ﺭﺍﺬﮔ ﺮﺛﺍ ﻪﮐ ﺍﺭ CSS ﯽﮔﮋﯾﻭ ﻡﺎﻧ

transition-timing-function

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺭﺍﺬﮔ ﺮﺛﺍ ﺖﻋﺮﺳ ﯽﻨﺤﻨﻣ

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