CSS3 ಅನಿಮೇಷನ್ಸ್ ಉತ್ತಮ ಬಳಕೆ ಮಾಡಲು ಹೇಗೆ: ಟ್ಯುಟೋರಿಯಲ್, ಮಾದರಿ ಕೋಡ್ಸ್, ಮತ್ತು ಉದಾಹರಣೆಗಳು

  • ವೆಬ್ಸೈಟ್ ವಿನ್ಯಾಸ
  • ನವೀಕರಿಸಲಾಗಿದೆ: ಆಗಸ್ಟ್ 28, 2013

ನಾವು ಉಪಯೋಗಿಸಿದ ಮತ್ತು jQuery ಅನ್ನು ಬಳಸಿದಾಗ ನಾವು ಅನಿಮೇಷನ್ಗಳ ಮೇಲೆ ಪೂರ್ಣ ನಿಯಂತ್ರಣವನ್ನು ಹೊಂದಿದ್ದೇವೆ ಮತ್ತು ನಾವು ಕೆಲವು ಅದ್ಭುತವಾದ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಬಹುದು, ಆದರೆ ಬೆಲೆ ತುಂಬಾ ಹೆಚ್ಚಾಗಿದೆ. ಪ್ರಕ್ರಿಯೆ ಸಮಯ, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ (ಉದಾಹರಣೆಗೆ, ಮೊಬೈಲ್ ಸಾಧನಗಳು, ಜೆಎಸ್ಗೆ ಬಂದಾಗ ವಿಭಿನ್ನವಾಗಿವೆ) ಮತ್ತು ಕೋಡ್ ಸಂಕೀರ್ಣತೆಯು ಅನಿಮೇಟೆಡ್ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ರಚಿಸುವಾಗ ನಾವು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಅಂಶಗಳಾಗಿವೆ.

ಆದ್ದರಿಂದ, ಇಂದು ನಾವು ಸಿಎಸ್ಎಸ್ ಅನಿಮೇಷನ್ಸ್ ಮತ್ತು ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸುವುದರ ಮೂಲಕ JS ತಪ್ಪಿಸಲು ಹೇಗೆ ನೋಡುತ್ತೇವೆ. ಅಕಾರ್ಡಿಯನ್ ಫಲಕಗಳು ಮತ್ತು ಆನಿಮೇಟೆಡ್ ಉಪ ಮೆನುಗಳಂತಹ ಕೆಲವು ಅದ್ಭುತವಾದ ಪರಿಣಾಮಗಳಿಗೆ ನಾವು ಮೂಲಭೂತ ಕ್ರಮಗಳನ್ನು ಚರ್ಚಿಸುತ್ತೇವೆ.

ಆಸನವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ, ನೀವು ನೋಟ್ಪಾಡ್ ಮತ್ತು ನಿಜವಾದ ಬ್ರೌಸರ್ (ಏನೇ ಆದರೆ IE) ಮತ್ತು ನಾವು ಪ್ರಾರಂಭಿಸೋಣ.

ವಾರ್ಮಿಂಗ್ ಅಪ್

ಸಿಎಸ್ಎಸ್ ಆನಿಮೇಷನ್ಗಳನ್ನು ಬಳಸುವುದರಲ್ಲಿ ನಮಗೆ ಕೆಲವು ಪ್ರಯೋಜನಗಳಿವೆ (ಮತ್ತು ನಮ್ಮ ಜೀವನದಲ್ಲಿ ಎಲ್ಲವೂ ಅನಾನುಕೂಲಗಳು). ನಿಮ್ಮ ಬಾಸ್ ಅಥವಾ ಕ್ಲೈಂಟ್ಗೆ ನೀವು ಮಾರಾಟ ಮಾಡುವ ಅಗತ್ಯವಿದ್ದರೆ, ನೀವು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು:

  • ಅವುಗಳು ಸಂಭವನೀಯ ವೇಗವನ್ನು ಹೊಂದಿವೆ, ಏಕೆಂದರೆ ಅವು ಹಾರ್ಡ್ವೇರ್ ವೇಗವರ್ಧಕವನ್ನು ಬಳಸುತ್ತವೆ (HTML5 ಅಳವಡಿಕೆಗಳಂತೆ)
  • ಅವರು ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಉತ್ತಮ ಪ್ರದರ್ಶನ ನೀಡುತ್ತಾರೆ ಮತ್ತು ಸ್ಪರ್ಶ ಈವೆಂಟ್ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ನಿರ್ದಿಷ್ಟ ಕೋಡ್ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ
  • ಬ್ರೌಸರ್ನಿಂದ JS ಅನ್ನು ಅರ್ಥೈಸಿಕೊಳ್ಳಬೇಕು ಮತ್ತು ಬ್ರೌಸರ್ ಅನ್ನು ಮುರಿಯುವ ಸಾಧ್ಯತೆಗಳು ಹೆಚ್ಚು ದೊಡ್ಡದಾಗಿರುತ್ತವೆ. ಆದ್ದರಿಂದ ಸಿಎಸ್ಎಸ್ ವಿಫಲವಾದಾಗ, ಅದು ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಮುರಿದುಬಿಡಬಹುದು, ಅದು ಮೌನವಾಗಿ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ
  • ಅವರಿಗೆ ಸಾಕಷ್ಟು ಉತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲವಿದೆ (ಈ ಸೈಟ್ ಅದರ ಮೇಲೆ ನಿರ್ದಿಷ್ಟ ಅಂಕಿಅಂಶಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ: http://caniuse.com/#search )

CSSXNUM ಅನಿಮೇಷನ್ಸ್ ಉದಾಹರಣೆಗಳು

ಈ ಪೋಸ್ಟ್‌ನ ಮಾಂಸವನ್ನು ನಾವು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ಶುದ್ಧ ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಮಾಡಿದ ಕೆಲವು ಸುಂದರವಾದ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನೋಡೋಣ.

ಶುದ್ಧ CSS ಟ್ವಿಟರ್ ಫೇಲ್ ವೇಲ್

ಅನಿಮೇಟೆಡ್ ವಿಫಲವಾದ ತಿಮಿಂಗಿಲ

ಸ್ಟೀವನ್ ಡೆನ್ನಿಸ್ ಮಾಡಿದ, ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಿ.

ಶುದ್ಧ ಸಿಎಸ್ಎಸ್ ಸ್ಕ್ರೋಲಿಂಗ್ ಕೋಕ್ ಕ್ಯಾನ್
ಸಿಎಸ್ಎಸ್ 3 ಬಂಗಾರದ ಉದಾಹರಣೆಗಳು: ಸ್ಕ್ರೋಲಿಂಗ್ ಕೋಕ್ ಕ್ಯಾನ್

ರೋಮನ್ ಕಾರ್ಟೆಸ್ ಮಾಡಿದ, ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಿ.

ಶುದ್ಧ ಸಿಎಸ್ಎಸ್ ವಾಕಿಂಗ್ ಮ್ಯಾನ್

ಸಿಎಸ್ಎಸ್ 3 ಬಂಗಾರದ ಉದಾಹರಣೆಗಳು: ವಾಕಿಂಗ್ ಮ್ಯಾನ್

ಆಂಡ್ರ್ಯೂ ಹೋಯರ್ ಮಾಡಿದ, ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಿ.

ನಿಮ್ಮ ಕೈಗಳನ್ನು ಡರ್ಟಿ ಪಡೆಯುವುದು

ಕೋಡ್ ಪ್ರಾರಂಭಿಸೋಣ. ಅನಿಮೇಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು ನಾವು ಸಿಎಸ್ಎಸ್ ಹುಸಿ ತರಗತಿಗಳನ್ನು ಸಾಕಷ್ಟು ಬಳಸುತ್ತೇವೆ. ಪ್ರಾಮಾಣಿಕವಾಗಿ ಹೇಳಬೇಕೆಂದರೆ, ಹೆಚ್ಚಿನ ಅಭಿವರ್ಧಕರು ನೀವು JS ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಮತ್ತು ಸಕ್ರಿಯಗೊಳಿಸುವ ಅನಿಮೇಷನ್ಗಳನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುತ್ತಾರೆ, ಆದರೆ ಇಲ್ಲಿ ನಾವು ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ನೋಡುತ್ತೇವೆ:

# test {background: red; } # ಟೆಸ್ಟ್: ಹೋವರ್ {background: green; } # ಟೆಸ್ಟ್: ಸಕ್ರಿಯ {ಹಿನ್ನೆಲೆ: ನೀಲಿ; } # ಪರೀಕ್ಷೆ: ಗುರಿ {background} black; }

ನಾವು ಬಳಸಲು ಕೆಲವು ಹುಸಿ ತರಗತಿಗಳು ಹೊಂದಿವೆ, ಆದರೆ ನಿಮಗೆ ಆಲೋಚನೆ ಸಿಕ್ಕಿದೆ! ಹಾಗಾಗಿ ನೀವು #test ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದರೆ ಅದು ಸಂಭವಿಸುತ್ತದೆ (ಇದು ಲಿಂಕ್ ಎಂದು ಊಹಿಸಿ):

  • ಸಾಮಾನ್ಯ ಸ್ಥಿತಿ: ಹಿನ್ನೆಲೆ ಕೆಂಪು ಆಗಿರುತ್ತದೆ
  • ಹೋವರ್: ಮೌಸ್ ಅಂಶ ಪ್ರದೇಶಕ್ಕೆ ಪ್ರವೇಶಿಸಿದಾಗ ಅದು ಹಸಿರು ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿರುತ್ತದೆ
  • ಸಕ್ರಿಯ: ನೀವು ಅದರ ಮೇಲೆ ಕರ್ಸರ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮತ್ತು ಮೌಸ್ ಗುಂಡಿಯನ್ನು ಒತ್ತಿದಾಗ ಅದು ಹಿನ್ನಲೆ ಬಣ್ಣವನ್ನು ನೀಲಿ ಬಣ್ಣದ್ದಾಗಿರುತ್ತದೆ
  • ಟಾರ್ಗೆಟ್: ಪ್ರಸ್ತುತ ಪುಟವು URL ನಲ್ಲಿ #test ಅನ್ನು ಹೊಂದಿರುವಾಗ ಈ ಅಂಶವು ಕಪ್ಪು ಆಗಿರುತ್ತದೆ

ಇವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದನ್ನು ಸಿಎಸ್ಎಸ್ ಅನಿಮೇಷನ್ಗಳಿಗಾಗಿ ಬಳಸಬಹುದು, ಉದಾಹರಣೆಗೆ ನೀವು ಈ ಕೋಡ್ನೊಂದಿಗೆ ಗುರಿಯ ಸೂಡೊ ಅಂಶವನ್ನು ಬಳಸುವುದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಮತ್ತು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು 2 ಲಿಂಕ್ಗಳನ್ನು ರಚಿಸಬಹುದು:

<a href='#test'> ಸಕ್ರಿಯಗೊಳಿಸು </a> <a href='#'> ನಿಷ್ಕ್ರಿಯಗೊಳಿಸು </a>

ಸಿಎಸ್ಎಸ್ ಪರಿವರ್ತನೆಗಳು

ಸಿಎಸ್ಎಸ್ ಸ್ಥಿತ್ಯಂತರವು ಆರಂಭದಿಂದ ಕೊನೆಯ ಸ್ಥಿತಿಗೆ ಸರಾಗವಾಗಿ ಬದಲಾಗುತ್ತದೆ. ಹಾಗಾಗಿ "ಪರಿವರ್ತನೆ" ಆಸ್ತಿಯ ಸಮಯ ಮತ್ತು ಪ್ರತಿ ಆಸ್ತಿಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಬೇಕು ಮತ್ತು ಆನಿಮೇಷನ್ ಹೇಗೆ ಇರಬೇಕೆಂಬುದನ್ನು ಬಳಸಿಕೊಂಡು ಮುಖ್ಯ ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಒಂದು ಉದಾಹರಣೆ ನೋಡೋಣ:

.test {/ * ಪರಿವರ್ತನೆ-ಆಸ್ತಿ ಅವಧಿಯ ಸಮಯ-ಕಾರ್ಯನಿರ್ವಹಣೆ, * / ಬಣ್ಣ: ನೀಲಿ; ಪರಿವರ್ತನೆ: ಬಣ್ಣ 2 ಗಳು, ಫಾಂಟ್-ಗಾತ್ರದ 2 ಗಳು ಸುಲಭವಾಗಿ ಔಟ್ ಆಗುತ್ತವೆ; } .ಟೆಸ್ಟ್: ಹೋವರ್ {color: red; } .ಟೆಸ್ಟ್: ಸಕ್ರಿಯ {ಫಾಂಟ್-ಗಾತ್ರ: 200%; }

ನೀವು .ಟೆಸ್ಟ್ ಅಂಶವನ್ನು ಹರಿದಾಗ ಅದು ನಿಧಾನವಾಗಿ ಬಣ್ಣವನ್ನು ನೀಲಿ ಬಣ್ಣದಿಂದ ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ (ಯಾವುದು ಒಳ್ಳೆಯ ಪ್ಯಾಲೆಟ್, ಶಬ್ದ?). ನೀವು ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಫಾಂಟ್ ಗಾತ್ರ ಕ್ರಮೇಣ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರದ 200% ಗೆ ಹೆಚ್ಚಾಗುತ್ತದೆ.

ಅನಿಮೇಷನ್ಗಾಗಿ "ಸಮಯ" ಹೇಗೆ ಖರ್ಚು ಮಾಡಲಾಗುವುದು ಎಂದು ನಾವು ಸುಲಭವಾಗಿ "ಹೊರಹೊಮ್ಮುವ" ಪರಿವರ್ತನೆಯ ಸಮಯದ ಆಸ್ತಿ ಹೊಂದಿದ್ದೇವೆ. ಸಾಧ್ಯವಿರುವ ಮೌಲ್ಯಗಳು ಇಲ್ಲಿವೆ:

  • ಲೀನಿಯರ್: ಪ್ರಾರಂಭದಿಂದ ಕೊನೆಯವರೆಗೆ ಅದೇ ವೇಗ
  • ಸರಾಗವಾಗಿ: ನಿಧಾನ ಪ್ರಾರಂಭ
  • ಸುಲಭವಾಗಿ ಔಟ್: ಸ್ಲೋ ಎಂಡ್
  • ಸುಲಭ: ನಿಧಾನಗತಿಯ ಪ್ರಾರಂಭ, ಮಧ್ಯದಲ್ಲಿ ವೇಗವಾಗಿ, ನಂತರ ನಿಧಾನವಾಗಿ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ
  • ಸರಾಗವಾಗಿ ಪ್ರಾರಂಭಿಸುವುದು: ನಿಧಾನಗತಿಯ ಪ್ರಾರಂಭ, ನಿಧಾನಗತಿಯ ಕೊನೆ
  • ಕ್ಯುಬಿಕ್-ಬೆಝಿಯರ್ (a, b, c, d): ಕಸ್ಟಮ್ ವೇಗ

ಕ್ಯುಬಿಕ್ ಬೆಝಿಯರ್ ಕಾರ್ಯವು 4 ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ 0 ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ ಆನಿಮೇಷನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು 1 ನಿಂದ XNUMX ಗೆ ಬದಲಾಗುತ್ತದೆ, ಅನಿಮೇಶನ್ ವೇಗ X ಅವಧಿಯ ಗಣಿತದ ರೇಖೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.

ಉತ್ತಮ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗಾಗಿ ನೀವು ಒಪೆರಾ, ಫೈರ್ಫಾಕ್ಸ್ ಮತ್ತು ವೆಬ್ಕಿಟ್ಗಾಗಿ ಮಾರಾಟಗಾರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಬೇಕು:

div {width: 400px; -ಓ ಪರಿವರ್ತನೆ: ಅಗಲ 2s; -moz- ಪರಿವರ್ತನೆ: ಅಗಲ 2s; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಅಗಲ 2s; ಪರಿವರ್ತನೆ: ಅಗಲ 2s; }

ಅಲ್ಲದೆ, ಬ್ರೌಸರ್ ಅಗಲ (ಮೊಬೈಲ್ ಸಾಧನಗಳು, ಮಾತ್ರೆಗಳು) ಅವಲಂಬಿಸಿ ವಿಭಿನ್ನ ಪರಿವರ್ತನೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ನೀವು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಇದು ಒಂದು ಸರಳ ಉದಾಹರಣೆಯಾಗಿದೆ:

ದೇಹ {ಫಾಂಟ್ ಗಾತ್ರ: 1em; } @media ಸ್ಕ್ರೀನ್ ಮತ್ತು (ಗರಿಷ್ಠ-ಅಗಲ: 800px) {body {font-size: 0.8em; }} @media ಸ್ಕ್ರೀನ್ ಮತ್ತು (ಗರಿಷ್ಠ-ಅಗಲ: 400px) {ದೇಹ {ಫಾಂಟ್-ಗಾತ್ರ: 0.7em; }}

ಇಲ್ಲಿ ನೀವು ಬ್ರೌಸರ್ ಅಗಲವನ್ನು ಹೆಚ್ಚಿಸಿದಾಗ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ತಕ್ಷಣವೇ ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ. ಈ ಕೋಡ್ ಸಂಭವಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ಹೆಚ್ಚು ಸುಗಮ ಪರಿವರ್ತನೆ ನೀಡುತ್ತದೆ:

ದೇಹದ {-o- ಪರಿವರ್ತನೆ: ಫಾಂಟ್-ಗಾತ್ರ .5s ರೇಖೀಯ; -moz- ಪರಿವರ್ತನೆ: ಫಾಂಟ್-ಗಾತ್ರ .5s ರೇಖೀಯ; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಫಾಂಟ್-ಗಾತ್ರ .5s ರೇಖೀಯ; ಪರಿವರ್ತನೆ: ಫಾಂಟ್ ಗಾತ್ರ .5s ರೇಖೀಯ; }

ಅಗಲಗಳು, ಬಣ್ಣಗಳು, paddings, ಮೆನು ಪ್ರದರ್ಶನವನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಭಾವಚಿತ್ರ / ಭೂದೃಶ್ಯದ ವಿವಿಧ ಪ್ರದರ್ಶನಗಳು ಅಥವಾ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ನೀವು ಇದನ್ನು ಬಳಸಬಹುದಾಗಿರುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಬಂಗಾರದ - ರಿಯಲ್ ಫನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ

ಆನಿಮೇಷನ್ ಎನ್ನುವುದು ಏಕ ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪರಿವರ್ತನೆಗಳ ಅನುಕ್ರಮವಾಗಿದೆ. ಸಿಎಸ್ಎಸ್ ಅನಿಮೇಷನ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು 2 ಹಂತಗಳನ್ನು ಅನುಸರಿಸಬೇಕು.

@ ಕೀಫ್ರೇಮ್ ನಿಯಮವನ್ನು ಆನಿಮೇಷನ್ ಹಂತಗಳ ಅನುಕ್ರಮವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಇದು ಒಂದು ಅನನ್ಯ ಹೆಸರು ಮತ್ತು ಈ ಅನಿಮೇಷನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಶೈಲಿಗಳಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಎಂದಿನಂತೆ ನಾವು ಈ ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ ಕೆಲವು ಮಾರಾಟಗಾರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಮಾಡಬೇಕಾಗಿದೆ:

/ * ಪ್ರತಿ ಮಾರಾಟಗಾರರಿಗೆ * / @ -o- ಕೀಫ್ರೇಮ್ ನನ್ನ-ಅನಿಮೇಶನ್ {@ @ ಮೋಜ್-ಕೀಫ್ರೇಮ್ ಮೈ-ಆನಿಮೇಷನ್ {... @ -webkit- ಕೀಫ್ರೇಮ್ ಮೈ-ಅನಿಮೇಷನ್ {/ / ಅನಿಮೇಷನ್ ಹೆಸರು * / @keyframe my-animation {/ * ಫ್ರೇಮ್ ಸೆಲೆಕ್ಟರ್ * / 0% {/ * ಫ್ರೇಮ್ ಸ್ಟೈಲ್ * / ಎಡ: 0px; ಟಾಪ್: 0px; } 25% {ಎಡ: 200px; ಟಾಪ್: 0px; } 50% {ಎಡ: 200px; ಟಾಪ್: 200px; } 75% {ಎಡ: 0px; ಟಾಪ್: 200px; } 100% {ಎಡ: 0px; ಟಾಪ್: 0px; }}

ಆದ್ದರಿಂದ, ಪ್ರತಿಯೊಂದು ಶೈಲಿ ಫ್ರೇಮ್ / ಕಾಲಾವಧಿ (ಫ್ಲ್ಯಾಷ್ ಅನಿಮೇಶನ್ನ ಫ್ರೇಮ್ಗಳು ನಂತಹ) ಶೇಕಡಾವಾರು ಮತ್ತು ಅಲ್ಲಿ ಅಳವಡಿಸಬೇಕಾದ ಶೈಲಿಗಳಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲ್ಪಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ ಈ ಕೀಫ್ರೇಮ್, ಅಂಶವು ಎಡಕ್ಕೆ, ನಂತರ ಮೇಲಕ್ಕೆ, ನಂತರ ಬಲಕ್ಕೆ, ನಂತರ ಕೆಳಕ್ಕೆ ಚಲಿಸುತ್ತದೆ ಎಂದು ಹೇಳುತ್ತದೆ.

ನೀವು ಹಂತ 1 ಅನ್ನು ಅನುಸರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕೀಫ್ರೇಮ್ ಅನ್ನು ರಚಿಸಿದ ನಂತರ ನೀವು ನಿಜವಾಗಿ ಅದನ್ನು ಒಂದು ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಬಹುದು. ನಂತರ ನಾವು ಸಿಎಸ್ಎಸ್ ಪರಿವರ್ತನೆಯೊಂದಿಗೆ ಮಾಡಿದಂತೆಯೇ ನಾವು ಸಾಕಷ್ಟು ತರ್ಕವನ್ನು ಬಳಸುತ್ತೇವೆ, ಈಗ ನಮ್ಮ "ಪರಿವರ್ತನೆ" ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಅನಿಮೇಶನ್ ಆಗಿದೆ.

ಅದನ್ನು ಅನ್ವಯಿಸಲು ನಾವು ಆನಿಮೇಶನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುತ್ತೇವೆ ಮತ್ತು ಅದು 7 ಉಪ-ಗುಣಗಳನ್ನು ಹೊಂದಿದೆ:

  • ಹೆಸರು: ಆ ವಿಶಿಷ್ಟ ಗುರುತು
  • ಅವಧಿ: 0% ರಿಂದ 100% ವರೆಗೆ ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ?
  • ಸಮಯ-ಕಾರ್ಯ: ಸಂಕ್ರಮಣ ಸಮಯದ ಕಾರ್ಯನಿರ್ವಹಣೆಯಂತೆಯೇ ಬಹುಮಟ್ಟಿಗೆ ಒಂದೇ
  • ವಿಳಂಬ: 0% ಪ್ರಾರಂಭಿಸಲು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ
  • ಪರಿವರ್ತನೆ-ಎಣಿಕೆ: ನಾವು ಎಷ್ಟು ಪುನರಾವರ್ತನೆಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ (ಅನಂತ ಲೂಪ್ಗಾಗಿ "ಅನಂತ")
  • ನಿರ್ದೇಶನ: ಸಾಮಾನ್ಯ ಅಥವಾ ಪರ್ಯಾಯ (ಹಿಮ್ಮುಖ)
  • ಪ್ಲೇ-ಸ್ಟೇಟ್: ಆನಿಮೇಷನ್ ಚಲಿಸುತ್ತಿದ್ದರೆ ಅಥವಾ ವಿರಾಮಗೊಳಿಸಿದಲ್ಲಿ

ಇದು ಪುಟದ ಗುರಿಯಾಗಿರುವಾಗ # ಟೆಸ್ಟಿಮೆಂಟ್ಗೆ ನಮ್ಮ ಅನಿಮೇಶನ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ:

#test: target {/ * animation-name | ಕಾಲಾವಧಿ | ಸಮಯ-ಕಾರ್ಯ | ವಿಳಂಬ | ಪುನರಾವರ್ತನೆ-ಎಣಿಕೆ | ನಿರ್ದೇಶನ | ನಾಟಕ-ರಾಜ್ಯ * / ಅನಿಮೇಷನ್: ನನ್ನ-ಅನಿಮೇಷನ್ 10s ರೇಖೀಯ 0s ಅನಂತ ಸಾಮಾನ್ಯ ಚಾಲನೆಯಲ್ಲಿರುವ; }

ಇದನ್ನು ಮನಸ್ಸಿನಲ್ಲಿ ನಾವು ಕೆಲವು ಅದ್ಭುತ ಉದಾಹರಣೆಗಳನ್ನು ರಚಿಸಬಹುದು.

ಸಿಎಸ್ಎಸ್ ಮಾತ್ರ ಅಕಾರ್ಡಿಯನ್

CSS ಅನಿಮೇಷನ್ಗಳನ್ನು ಬಳಸುವುದನ್ನು ನಾವು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಫಲಕಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ. ಇಲ್ಲಿ ಮೂಲ HTML ರಚನೆಯಾಗಿದೆ:

<div class = "accordion"> <a href="#tabxNUMX"> ಟ್ಯಾಬ್ 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab1 "> ಟ್ಯಾಬ್ 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tabxNUMX"> ಟ್ಯಾಬ್ 2 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

ಇದು ಫಲಕಗಳು ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದನ್ನು ಪ್ರಚೋದಿಸುವ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಮಾಯಾ ಎಲ್ಲಿ ನಡೆಯುತ್ತದೆ:

/ * ಅಕಾರ್ಡಿಯನ್ ಒಳಗಿನ ಯಾವುದೇ ಡಿವ್ * /. ಅಕಾರ್ಡಿಯನ್ ಡಿವಿ {/ * ಡೀಫಾಲ್ಟ್ ಮೂಲಕ ಮರೆಮಾಡಲಾಗಿದೆ * / ಎತ್ತರ: 0; ಓವರ್ಫ್ಲೋ: ಮರೆಮಾಡಲಾಗಿದೆ; / * ಕಪ್ಪು ಮ್ಯಾಜಿಕ್ * / ಪರಿವರ್ತನೆ: ಎತ್ತರ 1s; } / * ಪ್ರಸ್ತಾಪಿತ ಡಿವ್ ಗುರಿಯೆಂದರೆ * /. ಅಕಾರ್ಡಿಯನ್ ಡಿವಿ: ಗುರಿ {/ * ಎತ್ತರ: ಸ್ವಯಂ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ, ಆದರೆ ಇದು ಉತ್ತಮವಾದ * / ಎತ್ತರ ಕೆಲಸ ಮಾಡುತ್ತದೆ: 80px; }

ಬಹಳ ಸರಳ, ಹೇಹ್? ಮತ್ತು ಇದಕ್ಕಾಗಿ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಜೀವನವನ್ನು ನೀವು JS ಬಳಸಿದ್ದೀರಾ? :)

Submenus ಜೊತೆ ಸಿಎಸ್ಎಸ್ ಮಾತ್ರ ಮೆನು

ಮತ್ತು ಇದು ಮತ್ತೊಂದು ಸರಳವಾದ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿದೆ. ನಿಸ್ಸಂಶಯವಾಗಿ ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವಿದ್ದೀರಿ, ಮತ್ತು ಆಗಾಗ್ಗೆ ನಾವು ಕೆಲವು ಉಪಮೆನುಗಳನ್ನು ಬಳಸಬೇಕಾಗಿದೆ. ಐಟಂಗಳನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ಅತ್ಯುತ್ತಮ ಮಾರ್ಗವೆಂದರೆ jQuery ಬಳಸುತ್ತಿದೆಯೇ? ಸರಿ, ನೀವು ಈ ಕೋಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿದ ನಂತರ ಮತ್ತೆ ಯೋಚಿಸಿ:

<nav> <ul> <li> <a href='#item1'> ಐಟಂ 1 </a> <div> <ul> <li> <a href='#item11'> ಐಟಂ 1.1 </a> </ li> <li> <a href='#item12'> ಐಟಂ 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> ಐಟಂ 2 </a> <div> <ul> <li> <a href='#item21'> ಐಟಂ 2.1 </a> </ li> <li> <a href='#item22'> ಐಟಂ 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

ಮತ್ತು ಮಾಂತ್ರಿಕ ಇಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ:

ಒಂದು {/ * ಕೇವಲ ಟ್ಯಾಡ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ * / display: block; ಪ್ಯಾಡಿಂಗ್: 4px; } NAV {text-align: center; } / * ಯಾವುದೇ ಮೆನು (ಮುಖ್ಯವಾದವು ಸೇರಿದಂತೆ) * / ನ್ಯಾವಿ ಉಲ್ {ಪ್ರದರ್ಶನ: ಇನ್ಲೈನ್-ಬ್ಲಾಕ್; ಪಟ್ಟಿ-ಶೈಲಿ: ಯಾವುದೂ ಇಲ್ಲ; } NAV> ಉಲ್> li {/ * ಅಡ್ಡಲಾಗಿರುವ ಐಟಂಗಳು (ಲಂಬವಾದವು ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ) * / ಫ್ಲೋಟ್: ಎಡ; } NAV li div {/ * ಯಾವುದೇ ಉಪ ಮೆನು * / ಎತ್ತರವನ್ನು ಕುಸಿದು: 0; ಓವರ್ಫ್ಲೋ: ಮರೆಮಾಡಲಾಗಿದೆ; / * ಹೌದಿನಿ ಭಾವನೆಗಳು * / ಪರಿವರ್ತನೆ: ಎತ್ತರ 1s; } ನ್ಯಾವಿ ಲೀ: ಹೋವರ್> ಡಿವಿ {ಎತ್ತರ: 56px; }

ಒಟ್ಟಾರೆಯಾಗಿ

ಇದು ನಿಸ್ಸಂಶಯವಾಗಿ ಪ್ರಾರಂಭಿಕ ಮಾರ್ಗದರ್ಶಿಯಾಗಿದೆ. ಸಿಎಸ್ಎಸ್ ಮಾತ್ರ ಅನಿಮೇಷನ್ಗಳು ಮತ್ತು ಬಹಳಷ್ಟು ಸಂಗತಿಗಳನ್ನು ಇನ್ನೂ ಬರಲು ಇನ್ನೂ ಬಳಸಿ ಇತರ ಹಲವು ತಂಪಾದ ಪರಿಣಾಮಗಳಿವೆ.

ಆದ್ದರಿಂದ, ಮೊದಲು ಇದನ್ನು ಬಳಸಿದ್ದೀರಾ? ಸಿಎಸ್ಎಸ್ ಅನಿಮೇಷನ್ಗಳಿಗಾಗಿ ಮತ್ತೊಂದು ಉತ್ತಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನೀವು ಯೋಚಿಸುತ್ತೀರಾ? ನಿಮ್ಮ ಆಲೋಚನೆಗಳನ್ನು ಕಾಮೆಂಟ್ಗಳನ್ನು ಬಳಸಿ ಹಂಚಿಕೊಳ್ಳಿ!

ರೋಚೆಸ್ಟರ್ ಒಲಿವೆರಾ ಬಗ್ಗೆ

ನಾನು ಇಟಾಜುಬ (ಎಂಜಿ), ಬ್ರೆಸಿಲ್ನಿಂದ ವೆಬ್ ಡಿಸೈನರ್ ಮತ್ತು ಉದ್ಯಮಿ ಆಗಿದ್ದೇನೆ. ನಾನು ಅಸ್ಪಷ್ಟ ವಿಷಯಗಳ ಬಗ್ಗೆ ಬರೆಯುತ್ತಿದ್ದೇನೆ ಮತ್ತು ಕೆಲವು ಅದ್ಭುತ ಸಂಗತಿಗಳನ್ನು ಮಾಡುತ್ತಿದ್ದೇನೆ.

¿»¿