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

CSS மாற்றிக்கு குறைவு

உங்கள் குறைவான குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.

CSS3 உருமாற்றங்களை எளிதாக உருவாக்கவும்

சிக்கலான CSS3 ஐ உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த, உள்ளுணர்வு கருவி குறியீடு எழுதாமல் மாற்றுகிறது. நிகழ்நேரத்தில் மாற்றங்களைக் காட்சிப்படுத்தி, உங்கள் திட்டங்களில் பயன்படுத்த உருவாக்கப்பட்ட CSS ஐ நகலெடுக்கவும்.

CSS மாற்றிக்கு ஸ்டைலஸ்

உங்கள் SCSS குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.

CSS மாற்றிக்கு Sass

உங்கள் Sass குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.

JSON ஆசிரியர்

பெரிய JSON ஐ எளிதாகத் திருத்தவும் - மின்னல் வேகம் & மென்மையான

விற்பனை வரி கால்குலேட்டர்

எங்கள் உள்ளுணர்வு விற்பனை வரி கால்குலேட்டர் மூலம் விற்பனை வரி மற்றும் மொத்த விலையை எளிதாகக் கணக்கிடுங்கள்.