CSS3 ਪਰਿਵਰਤਨ ਜਨਰੇਟਰ

ਨਿਰਵਿਘਨ ਧੁੰਦਲਾਪਨ ਤਬਦੀਲੀ

ਪ੍ਰਸਿੱਧ ਪ੍ਰੀਸੈੱਟ

ਫੇਡ ਪ੍ਰਭਾਵ

ਨਿਰਵਿਘਨ ਧੁੰਦਲਾਪਨ ਤਬਦੀਲੀ

ਸਕੇਲ ਪ੍ਰਭਾਵ

ਹੋਵਰ 'ਤੇ ਐਲੀਮੈਂਟ ਦਾ ਆਕਾਰ ਬਦਲੋ

ਘੁੰਮਾਓ ਪ੍ਰਭਾਵ

ਹੋਵਰ ਕਰਨ 'ਤੇ ਐਲੀਮੈਂਟ ਨੂੰ ਘੁੰਮਾਓ

ਸਲਾਈਡ ਪ੍ਰਭਾਵ

ਤੱਤ ਦੀ ਸਥਿਤੀ ਬਦਲੋ

ਰੰਗ ਬਦਲਣਾ

ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਤਬਦੀਲੀ

ਤਬਦੀਲੀਆਂ ਬਾਰੇ

CSS ਪਰਿਵਰਤਨ ਤੁਹਾਨੂੰ ਇੱਕ ਦਿੱਤੇ ਸਮੇਂ ਦੌਰਾਨ, ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲਾਂ ਨੂੰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਬਦਲਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।

ਆਮ ਤੌਰ 'ਤੇ ਐਨੀਮੇਟਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

  • ਚੌੜਾਈ, ਉਚਾਈ
  • ਹਾਸ਼ੀਆ, ਪੈਡਿੰਗ
  • ਧੁੰਦਲਾਪਨ, ਰੰਗ
  • transform (scale, rotate, translate)
  • background-color

ਪ੍ਰੋ ਸੁਝਾਅ: ਸਾਰੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ 'ਸਾਰੇ ਗੁਣ' ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ।

Preview

HOVER ME

ਤਿਆਰ ਕੀਤਾ ਕੋਡ

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

ਪਰਿਵਰਤਨ ਨਿਯੰਤਰਣ

300
0

ਹੋਵਰ ਪ੍ਰਭਾਵ

100%
100%
0px
0px
8px
8px

Related Tools