இலவச டெவலப்பர் கருவி

CSS அனிமேஷன் கட்டுபவர்

CSS கீஃப்ரேம் அனிமேஷன்களை பார்வைக்கு உருவாக்கவும். அனிமேஷன்களை நிகழ்நேரத்தில் முன்னோட்டமிட்டு, உருவாக்கப்பட்ட CSS குறியீட்டை உடனடியாக நகலெடுக்கவும்.

முன்னோட்டம்

கால அளவு2s

மறு செய்கைகள்

நேர செயல்பாடு

திசை

Keyframes

TranslateX (px)

மொழிபெயர்Y (px)

சுழற்று (டிகிரி)

அளவுகோல்

ஒளிபுகாநிலை

நிறம்

TranslateX (px)

மொழிபெயர்Y (px)

சுழற்று (டிகிரி)

அளவுகோல்

ஒளிபுகாநிலை

நிறம்

TranslateX (px)

மொழிபெயர்Y (px)

சுழற்று (டிகிரி)

அளவுகோல்

ஒளிபுகாநிலை

நிறம்

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

இந்த கருவி பற்றி

உங்கள் உலாவியில் நேரடியாக Css அனிமேஷன் பில்டருடன் உள்ளடக்கத்தை உருவாக்கி தனிப்பயனாக்கவும். உங்கள் விருப்பங்களை உள்ளமைக்கவும், வெளியீட்டை உருவாக்கவும் மற்றும் முடிவைப் பதிவிறக்கவும் அல்லது நகலெடுக்கவும். அனைத்தும் கிளையன்ட் பக்கமாக இயங்குகிறது - உங்கள் தரவு தனிப்பட்டதாக இருக்கும் மற்றும் செயலாக்கம் உடனடியாக இருக்கும்.

பயன்படுத்துவது எப்படி

உங்கள் தேவைகளுக்கு ஏற்ப அமைப்புகளையும் விருப்பங்களையும் உள்ளமைக்கவும்.

உங்கள் வெளியீட்டை உருவாக்க உருவாக்கு என்பதைக் கிளிக் செய்யவும்.

முடிவை முன்னோட்டமிட்டு, தேவைப்பட்டால் மாற்றங்களைச் செய்யவும்.

வெளியீட்டு கோப்பைப் பதிவிறக்கவும் அல்லது உங்கள் கிளிப்போர்டுக்கு நகலெடுக்கவும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

உருவாக்கப்பட்ட வெளியீட்டைத் தனிப்பயனாக்க முடியுமா?

ஆம். உங்கள் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப வெளியீட்டை மாற்றுவதற்கு கருவி பல்வேறு தனிப்பயனாக்குதல் விருப்பங்களை வழங்குகிறது. உருவாக்குவதற்கு முன் அமைப்புகளைச் சரிசெய்யவும் அல்லது வெவ்வேறு விருப்பங்களுடன் மீண்டும் உருவாக்கவும்.

உருவாக்கப்பட்ட உள்ளடக்கம் பயன்படுத்த இலவசமா?

ஆம். இந்தக் கருவியின் மூலம் நீங்கள் உருவாக்கும் அனைத்தும் தனிப்பட்ட, கல்வி அல்லது வணிக நோக்கங்களுக்காக எந்த கட்டுப்பாடுகளும் அல்லது பண்புக்கூறு தேவைகளும் இல்லாமல் பயன்படுத்துவதற்கு உங்களுடையது.

இதற்கு கணக்கு தேவையா?

இல்லை. கையொப்பமிடாமல், மின்னஞ்சல் இல்லாமலும், பதிவு இல்லாமலும், கருவி உடனடியாகப் பயன்படுத்தத் தயாராக உள்ளது. பக்கத்தைத் திறந்து உருவாக்கத் தொடங்கவும்.

எனது உள்ளீட்டுத் தரவு தனிப்பட்டதாக வைக்கப்பட்டுள்ளதா?

ஆம். அனைத்து செயலாக்கங்களும் உங்கள் உலாவியில் நடக்கும். உங்கள் உள்ளீட்டுத் தரவு மற்றும் உருவாக்கப்பட்ட வெளியீடு எந்த வெளிப்புற சேவையகத்திற்கும் அனுப்பப்படாது.

CSS அனிமேஷன் கட்டுபவர்

முன்னோட்டம்

Keyframes

Generated CSS

தொடர்புடைய கருவிகள்

CSS மினிஃபையர்

CSS Flexbox லேஅவுட் ஜெனரேட்டர்

CSS கட்டம் லேஅவுட் ஜெனரேட்டர்

CSS சாய்வு ஜெனரேட்டர்

இந்த கருவி பற்றி

பயன்படுத்துவது எப்படி

அடிக்கடி கேட்கப்படும் கேள்விகள்

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk