ಉಚಿತ ಡೆವಲಪರ್ ಟೂಲ್

ಸಿಎಸ್ಎಸ್ ಅನಿಮೇಷನ್ ಬಿಲ್ಡರ್

Q: ನಾನು ರಚಿಸಲಾದ ಔಟ್ಪುಟ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದೇ?

ಹೌದು. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಔಟ್ಪುಟ್ ಅನ್ನು ಹೊಂದಿಸಲು ಉಪಕರಣವು ವಿವಿಧ ಗ್ರಾಹಕೀಕರಣ ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ರಚಿಸುವ ಮೊದಲು ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಹೊಂದಿಸಿ ಅಥವಾ ವಿಭಿನ್ನ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಮರುಸೃಷ್ಟಿಸಿ.

Q: ನನ್ನ ಇನ್ಪುಟ್ ಡೇಟಾವನ್ನು ಖಾಸಗಿಯಾಗಿ ಇರಿಸಲಾಗಿದೆಯೇ?

ಹೌದು. ಎಲ್ಲಾ ಪ್ರಕ್ರಿಯೆಯು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ. ನಿಮ್ಮ ಇನ್ಪುಟ್ ಡೇಟಾ ಮತ್ತು ರಚಿತವಾದ ಔಟ್ಪುಟ್ ಅನ್ನು ಯಾವುದೇ ಬಾಹ್ಯ ಸರ್ವರ್ಗೆ ಎಂದಿಗೂ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ.

ದೃಷ್ಟಿಗೋಚರವಾಗಿ 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 ಅನಿಮೇಷನ್ ಬಿಲ್ಡರ್‌ನೊಂದಿಗೆ ವಿಷಯವನ್ನು ರಚಿಸಿ ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ. ನಿಮ್ಮ ಆದ್ಯತೆಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ, ಔಟ್‌ಪುಟ್ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಅಥವಾ ನಕಲಿಸಿ. ಎಲ್ಲವೂ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಅನ್ನು ನಡೆಸುತ್ತದೆ - ನಿಮ್ಮ ಡೇಟಾ ಖಾಸಗಿಯಾಗಿರುತ್ತದೆ ಮತ್ತು ಪ್ರಕ್ರಿಯೆಯು ತ್ವರಿತವಾಗಿರುತ್ತದೆ.

ಬಳಸುವುದು ಹೇಗೆ

ನಿಮ್ಮ ಅವಶ್ಯಕತೆಗಳನ್ನು ಹೊಂದಿಸಲು ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಆಯ್ಕೆಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ.

ನಿಮ್ಮ ಔಟ್‌ಪುಟ್ ರಚಿಸಲು ರಚಿಸಿ ಕ್ಲಿಕ್ ಮಾಡಿ.

ಫಲಿತಾಂಶವನ್ನು ಪೂರ್ವವೀಕ್ಷಿಸಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮಾಡಿ.

ಔಟ್‌ಪುಟ್ ಫೈಲ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಅಥವಾ ಅದನ್ನು ನಿಮ್ಮ ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ನಕಲಿಸಿ.

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

ನಾನು ರಚಿಸಲಾದ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದೇ?

ಹೌದು. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಹೊಂದಿಸಲು ಉಪಕರಣವು ವಿವಿಧ ಗ್ರಾಹಕೀಕರಣ ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ರಚಿಸುವ ಮೊದಲು ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಹೊಂದಿಸಿ ಅಥವಾ ವಿಭಿನ್ನ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಮರುಸೃಷ್ಟಿಸಿ.

ರಚಿಸಲಾದ ವಿಷಯವು ಬಳಸಲು ಉಚಿತವೇ?

ಹೌದು. ಈ ಪರಿಕರದೊಂದಿಗೆ ನೀವು ಉತ್ಪಾದಿಸುವ ಎಲ್ಲವನ್ನೂ ವೈಯಕ್ತಿಕ, ಶೈಕ್ಷಣಿಕ ಅಥವಾ ವಾಣಿಜ್ಯ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಯಾವುದೇ ನಿರ್ಬಂಧಗಳು ಅಥವಾ ಗುಣಲಕ್ಷಣದ ಅವಶ್ಯಕತೆಗಳಿಲ್ಲದೆ ಬಳಸಲು ನಿಮ್ಮದಾಗಿದೆ.

ಇದಕ್ಕೆ ಖಾತೆಯ ಅಗತ್ಯವಿದೆಯೇ?

ಇಲ್ಲ. ಯಾವುದೇ ಸೈನ್-ಅಪ್, ಇಮೇಲ್ ಮತ್ತು ನೋಂದಣಿ ಇಲ್ಲದೆ ತಕ್ಷಣವೇ ಬಳಸಲು ಉಪಕರಣವು ಸಿದ್ಧವಾಗಿದೆ. ಪುಟವನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ರಚಿಸಲು ಪ್ರಾರಂಭಿಸಿ.

ನನ್ನ ಇನ್‌ಪುಟ್ ಡೇಟಾವನ್ನು ಖಾಸಗಿಯಾಗಿ ಇರಿಸಲಾಗಿದೆಯೇ?

ಹೌದು. ಎಲ್ಲಾ ಪ್ರಕ್ರಿಯೆಯು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ. ನಿಮ್ಮ ಇನ್‌ಪುಟ್ ಡೇಟಾ ಮತ್ತು ರಚಿತವಾದ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಯಾವುದೇ ಬಾಹ್ಯ ಸರ್ವರ್‌ಗೆ ಎಂದಿಗೂ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ.

ಸಿಎಸ್ಎಸ್ ಅನಿಮೇಷನ್ ಬಿಲ್ಡರ್

ಪೂರ್ವವೀಕ್ಷಣೆ

Keyframes

Generated CSS

ಸಂಬಂಧಿತ ಟೂಲ್ಸ್

CSS ಮಿನಿಫೈಯರ್

ಸಿಎಸ್ಎಸ್ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಲೇಔಟ್ ಜನರೇಟರ್

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