ಪರಿವರ್ತನೆ css3 ಉದಾಹರಣೆಗಳು. CSS3 - ಪರಿವರ್ತನೆಗಳು. ಆಸ್ತಿ ಹೆಸರು ಪರಿವರ್ತನೆ-ಆಸ್ತಿ
ಸಿಎಸ್ಎಸ್ ಪರಿವರ್ತನೆಗಳು CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸುವಾಗ ಅನಿಮೇಷನ್ ವೇಗವನ್ನು ನಿಯಂತ್ರಿಸುವ ಮಾರ್ಗವನ್ನು ಒದಗಿಸಿ. ಆಸ್ತಿ ಬದಲಾವಣೆಗಳನ್ನು ಹೊಂದುವ ಬದಲು ತಕ್ಷಣವೇ ಜಾರಿಗೆ ಬರುವಂತೆ, ನಿನ್ನಿಂದ ಸಾಧ್ಯಒಂದು ನಿರ್ದಿಷ್ಟ ಅವಧಿಯಲ್ಲಿ ಆಸ್ತಿಯಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.ಉದಾಹರಣೆಗೆ, ನೀವು ಅಂಶದ ಬಣ್ಣವನ್ನು ಬಿಳಿ ಬಣ್ಣದಿಂದ ಕಪ್ಪು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸಿದರೆ, ಸಾಮಾನ್ಯವಾಗಿ ಬದಲಾವಣೆಯು ತ್ವರಿತವಾಗಿರುತ್ತದೆ. CSS ಪರಿವರ್ತನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದರೊಂದಿಗೆ, ವೇಗವರ್ಧನೆಯ ರೇಖೆಯನ್ನು ಅನುಸರಿಸುವ ಸಮಯದ ಮಧ್ಯಂತರಗಳಲ್ಲಿ ಬದಲಾವಣೆಗಳು ಸಂಭವಿಸುತ್ತವೆ, ಇವೆಲ್ಲವನ್ನೂ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು.
ಎರಡು ರಾಜ್ಯಗಳ ನಡುವೆ ಪರಿವರ್ತನೆಯನ್ನು ಒಳಗೊಂಡಿರುವ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಕರೆಯಲಾಗುತ್ತದೆ ಸೂಚ್ಯ ಪರಿವರ್ತನೆಗಳುಪ್ರಾರಂಭ ಮತ್ತು ಅಂತಿಮ ಸ್ಥಿತಿಗಳ ನಡುವಿನ ರಾಜ್ಯಗಳನ್ನು ಬ್ರೌಸರ್‌ನಿಂದ ಸೂಚ್ಯವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ.
CSS ಪರಿವರ್ತನೆಗಳು ಯಾವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬೇಕೆಂದು ನಿರ್ಧರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ (ಮೂಲಕ ಅವುಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಪಟ್ಟಿ ಮಾಡುವುದು), ಅನಿಮೇಷನ್ ಯಾವಾಗ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ (ಎ ಹೊಂದಿಸುವ ಮೂಲಕ ವಿಳಂಬ), ಪರಿವರ್ತನೆಯು ಎಷ್ಟು ಕಾಲ ಉಳಿಯುತ್ತದೆ (ಎ ಹೊಂದಿಸುವ ಮೂಲಕ ಅವಧಿ), ಮತ್ತು ಸ್ಥಿತ್ಯಂತರವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ (ಅವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ಸಮಯ ಕಾರ್ಯ, ಉದಾ. ಆರಂಭದಲ್ಲಿ ರೇಖೀಯವಾಗಿ ಅಥವಾ ತ್ವರಿತವಾಗಿ, ಕೊನೆಯಲ್ಲಿ ನಿಧಾನವಾಗಿ).
ಯಾವ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪರಿವರ್ತಿಸಬಹುದು?
ವೆಬ್ ಲೇಖಕರು ಯಾವ ಆಸ್ತಿಯನ್ನು ಅನಿಮೇಟೆಡ್ ಮಾಡಬೇಕು ಮತ್ತು ಯಾವ ರೀತಿಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಇದು ಸಂಕೀರ್ಣ ಪರಿವರ್ತನೆಗಳನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅರ್ಥವಿಲ್ಲದಂತೆ, ಅನಿಮೇಟಬಲ್ ಗುಣಲಕ್ಷಣಗಳ ಪಟ್ಟಿಯು ಸೀಮಿತ ಸೆಟ್‌ಗೆ ಸೀಮಿತವಾಗಿದೆ.
ಗಮನಿಸಿ: ಅನಿಮೇಟೆಡ್ ಮಾಡಬಹುದಾದ ಗುಣಲಕ್ಷಣಗಳ ಸೆಟ್ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಿದಂತೆ ಬದಲಾಗುತ್ತಿದೆ.
ಸ್ವಯಂ ಮೌಲ್ಯವು ಸಾಮಾನ್ಯವಾಗಿ ಬಹಳ ಸಂಕೀರ್ಣವಾದ ಪ್ರಕರಣವಾಗಿದೆ. ನಿಂದ ಮತ್ತು ಸ್ವಯಂಗೆ ಅನಿಮೇಟ್ ಮಾಡದಂತೆ ವಿವರಣೆಯು ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ. ಗೆಕ್ಕೊವನ್ನು ಆಧರಿಸಿದಂತಹ ಕೆಲವು ಬಳಕೆದಾರ ಏಜೆಂಟ್‌ಗಳು ಈ ಅಗತ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತಾರೆ ಮತ್ತು ವೆಬ್‌ಕಿಟ್‌ನಂತೆಯೇ ಇತರರು ಕಡಿಮೆ ಕಟ್ಟುನಿಟ್ಟಾಗಿರುತ್ತಾರೆ. ಸ್ವಯಂ ಜೊತೆಗೆ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಳಸುವುದು ಬ್ರೌಸರ್ ಮತ್ತು ಅದರ ಆವೃತ್ತಿಯನ್ನು ಅವಲಂಬಿಸಿ ಅನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು ಮತ್ತು ಅದನ್ನು ತಪ್ಪಿಸಬೇಕು.
ಪರಿವರ್ತನೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
CSS ಪರಿವರ್ತನೆಗಳನ್ನು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಟ್ರಾನ್ಸಿಶನ್ ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ನಿಯಂತ್ರಿಸಲಾಗುತ್ತದೆ. ಪರಿವರ್ತನೆಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಇದು ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಸಿಂಕ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಿಂದ ಹೊರಗುಳಿಯುವುದನ್ನು ಸುಲಭವಾಗಿಸುತ್ತದೆ, ಇದು CSS ನಲ್ಲಿ ಸಾಕಷ್ಟು ಸಮಯವನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಬಹಳ ನಿರಾಶಾದಾಯಕವಾಗಿರುತ್ತದೆ.
ಕೆಳಗಿನ ಉಪ-ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ನೀವು ಪರಿವರ್ತನೆಯ ಪ್ರತ್ಯೇಕ ಅಂಶಗಳನ್ನು ನಿಯಂತ್ರಿಸಬಹುದು:
(ಈ ಪರಿವರ್ತನೆಗಳು ನಮ್ಮ ಉದಾಹರಣೆಗಳ ಉದ್ದೇಶಕ್ಕಾಗಿ ಮಾತ್ರ ಅನಂತವಾಗಿ ಲೂಪ್ ಆಗುತ್ತವೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ; CSS ಪರಿವರ್ತನೆಗಳು ಪ್ರಾರಂಭದಿಂದ ಅಂತ್ಯದವರೆಗೆ ಆಸ್ತಿ ಬದಲಾವಣೆಯನ್ನು ಮಾತ್ರ ದೃಶ್ಯೀಕರಿಸುತ್ತವೆ. ನಿಮಗೆ ಲೂಪ್ ಮಾಡುವ ದೃಶ್ಯೀಕರಣಗಳ ಅಗತ್ಯವಿದ್ದರೆ, CSS ಅನಿಮೇಷನ್ ಆಸ್ತಿಯನ್ನು ನೋಡಿ.)
transition-property ಪರಿವರ್ತನೆಗಳನ್ನು ಅನ್ವಯಿಸಬೇಕಾದ CSS ಗುಣಲಕ್ಷಣಗಳ ಹೆಸರು ಅಥವಾ ಹೆಸರುಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮಾತ್ರ ಪರಿವರ್ತನೆಯ ಸಮಯದಲ್ಲಿ ಅನಿಮೇಟೆಡ್ ಮಾಡಲಾಗುತ್ತದೆ; ಎಲ್ಲಾ ಇತರ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬದಲಾವಣೆಗಳು ಎಂದಿನಂತೆ ತಕ್ಷಣವೇ ಸಂಭವಿಸುತ್ತವೆ. ಪರಿವರ್ತನೆ-ಅವಧಿ ಪರಿವರ್ತನೆಗಳು ಸಂಭವಿಸಬೇಕಾದ ಅವಧಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಪರಿವರ್ತನೆಯ ಸಮಯದಲ್ಲಿ ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಅನ್ವಯಿಸುವ ಒಂದೇ ಅವಧಿಯನ್ನು ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು ಅಥವಾ ಪ್ರತಿ ಆಸ್ತಿಯನ್ನು ಬೇರೆ ಬೇರೆ ಅವಧಿಯಲ್ಲಿ ಪರಿವರ್ತನೆ ಮಾಡಲು ಬಹು ಮೌಲ್ಯಗಳನ್ನು ಸೂಚಿಸಬಹುದು.ಪರಿವರ್ತನೆಯ ಅವಧಿ: 0.5ಸೆ
ಪರಿವರ್ತನೆಯ ಅವಧಿ: 1 ಸೆ
ಪರಿವರ್ತನೆಯ ಅವಧಿ: 2ಸೆ
ಪರಿವರ್ತನೆಯ ಅವಧಿ: 4 ಸೆ
ಗುಣಲಕ್ಷಣಗಳ ಮಧ್ಯಂತರ ಮೌಲ್ಯಗಳನ್ನು ಹೇಗೆ ಲೆಕ್ಕ ಹಾಕಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಕಾರ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಸಮಯ ಕಾರ್ಯಗಳುಪರಿವರ್ತನೆಯ ಮಧ್ಯಂತರ ಮೌಲ್ಯಗಳನ್ನು ಹೇಗೆ ಲೆಕ್ಕ ಹಾಕಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಿ. ಘನ ಬೆಜಿಯರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ನಾಲ್ಕು ಬಿಂದುಗಳಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲ್ಪಟ್ಟಂತೆ ಅನುಗುಣವಾದ ಕಾರ್ಯದ ಗ್ರಾಫ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಹೆಚ್ಚಿನ ಸಮಯದ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ನೀವು ಸರಾಗಗೊಳಿಸುವ ಕಾರ್ಯಗಳ ಚೀಟ್ ಶೀಟ್‌ನಿಂದ ಸರಾಗಗೊಳಿಸುವಿಕೆಯನ್ನು ಸಹ ಆಯ್ಕೆ ಮಾಡಬಹುದು. ಪರಿವರ್ತನೆ-ಸಮಯ-ಕಾರ್ಯ: ಸುಲಭ
ಪರಿವರ್ತನೆ-ಸಮಯ-ಕಾರ್ಯ: ರೇಖೀಯ
ಪರಿವರ್ತನೆ-ಸಮಯ-ಕಾರ್ಯ: ಹಂತ-ಅಂತ್ಯ
ಪರಿವರ್ತನೆ-ಸಮಯ-ಕಾರ್ಯ: ಹಂತಗಳು(4, ಅಂತ್ಯ)
ಪರಿವರ್ತನೆ-ವಿಳಂಬ: 0.5ಸೆ
ಪರಿವರ್ತನೆ-ವಿಳಂಬ: 1 ಸೆ
ಪರಿವರ್ತನೆ-ವಿಳಂಬ: 2ಸೆ
ಪರಿವರ್ತನೆ-ವಿಳಂಬ: 4 ಸೆ
ಸಂಕ್ಷಿಪ್ತ ಸಿಎಸ್ಎಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಬರೆಯಲಾಗಿದೆ:
ಡಿವಿ ( ಪರಿವರ್ತನೆ:
ಉದಾಹರಣೆಗಳು
ಸರಳ ಉದಾಹರಣೆ
ಈ ಉದಾಹರಣೆಯು ನಾಲ್ಕು-ಸೆಕೆಂಡ್ ಫಾಂಟ್ ಗಾತ್ರದ ಪರಿವರ್ತನೆಯನ್ನು ಎರಡು-ಸೆಕೆಂಡ್ ವಿಳಂಬದೊಂದಿಗೆ ಬಳಕೆದಾರರ ಇಲಿಗಳು ಅಂಶದ ಮೇಲೆ ಮತ್ತು ಅನಿಮೇಷನ್ ಪರಿಣಾಮದ ಪ್ರಾರಂಭದ ನಡುವೆ ನಿರ್ವಹಿಸುತ್ತದೆ:
#ವಿಳಂಬ (ಫಾಂಟ್-ಗಾತ್ರ: 14px; ಪರಿವರ್ತನೆ-ಪ್ರಾಪರ್ಟಿ: ಫಾಂಟ್-ಗಾತ್ರ; ಪರಿವರ್ತನೆ-ಅವಧಿ: 4 ಸೆ; ಪರಿವರ್ತನೆ-ವಿಳಂಬ: 2 ಸೆ; ) # ವಿಳಂಬ: ಹೋವರ್ (ಫಾಂಟ್-ಗಾತ್ರ: 36px; )
ಬಹು ಅನಿಮೇಟೆಡ್ ಗುಣಲಕ್ಷಣಗಳ ಉದಾಹರಣೆ
HTML ವಿಷಯ
ಕೆಳಗಿನ ಪೆಟ್ಟಿಗೆಯು ಪರಿವರ್ತನೆಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ: ಅಗಲ, ಎತ್ತರ, ಹಿನ್ನೆಲೆ-ಬಣ್ಣ, ರೂಪಾಂತರ. ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅನಿಮೇಟೆಡ್ ನೋಡಲು ಬಾಕ್ಸ್ ಮೇಲೆ ಸುಳಿದಾಡಿ.
ಸಿಎಸ್ಎಸ್ ವಿಷಯ
.box (ಗಡಿ-ಶೈಲಿ: ಘನ; ಗಡಿ-ಅಗಲ: 1px; ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಅಗಲ: 100px; ಎತ್ತರ: 100px; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #0000FF; ಪರಿವರ್ತನೆ: ಅಗಲ 2s, ಎತ್ತರ 2s, ಹಿನ್ನೆಲೆ-ಬಣ್ಣ 2s, ರೂಪಾಂತರ 2s; ) .ಬಾಕ್ಸ್:ಹೋವರ್ (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #FFCCCC; ಅಗಲ: 200px; ಎತ್ತರ: 200px; ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (180deg); )ಆಸ್ತಿ ಮೌಲ್ಯದ ಪಟ್ಟಿಗಳು ವಿಭಿನ್ನ ಉದ್ದಗಳನ್ನು ಹೊಂದಿರುವಾಗ
ಯಾವುದೇ ಆಸ್ತಿಯ ಮೌಲ್ಯಗಳ ಪಟ್ಟಿಯು ಇತರರಿಗಿಂತ ಚಿಕ್ಕದಾಗಿದ್ದರೆ, ಅವುಗಳನ್ನು ಹೊಂದಿಸಲು ಅದರ ಮೌಲ್ಯಗಳನ್ನು ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:
ಡಿವ್ (ಪರಿವರ್ತನೆ-ಆಸ್ತಿ: ಅಪಾರದರ್ಶಕತೆ, ಎಡ, ಮೇಲ್ಭಾಗ, ಎತ್ತರ; ಪರಿವರ್ತನೆ-ಅವಧಿ: 3ಸೆ, 5ಸೆ; )
ಇದನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ:
ಡಿವ್ (ಪರಿವರ್ತನೆ-ಆಸ್ತಿ: ಅಪಾರದರ್ಶಕತೆ, ಎಡ, ಮೇಲ್ಭಾಗ, ಎತ್ತರ; ಪರಿವರ್ತನೆ-ಅವಧಿ: 3ಸೆ, 5ಸೆ, 3ಸೆ, 5ಸೆ; )
ಅದೇ ರೀತಿ, ಯಾವುದೇ ಆಸ್ತಿಯ ಮೌಲ್ಯ ಪಟ್ಟಿಯು ಪರಿವರ್ತನೆ-ಆಸ್ತಿಗಿಂತ ಉದ್ದವಾಗಿದ್ದರೆ, ಅದನ್ನು ಮೊಟಕುಗೊಳಿಸಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಈ ಕೆಳಗಿನ CSS ಹೊಂದಿದ್ದರೆ:
ಡಿವ್ (ಪರಿವರ್ತನೆ-ಆಸ್ತಿ: ಅಪಾರದರ್ಶಕತೆ, ಎಡ; ಪರಿವರ್ತನೆ-ಅವಧಿ: 3ಸೆ, 5ಸೆ, 2ಸೆ, 1ಸೆ; )
ಇದನ್ನು ಹೀಗೆ ಅರ್ಥೈಸಲಾಗುತ್ತದೆ:
ಡಿವ್ (ಪರಿವರ್ತನೆ-ಆಸ್ತಿ: ಅಪಾರದರ್ಶಕತೆ, ಎಡ; ಪರಿವರ್ತನೆ-ಅವಧಿ: 3ಸೆ, 5ಸೆ; )
ಮೆನುಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುವಾಗ ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸುವುದು
ಬಳಕೆದಾರರು ಮೌಸ್ ಕರ್ಸರ್ ಅನ್ನು ಅವುಗಳ ಮೇಲೆ ಸುಳಿದಾಡುವಂತೆ ಮೆನುವಿನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುವುದು CSS ನ ಸಾಮಾನ್ಯ ಬಳಕೆಯಾಗಿದೆ. ಪರಿಣಾಮವನ್ನು ಇನ್ನಷ್ಟು ಆಕರ್ಷಕವಾಗಿಸಲು ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸುವುದು ಸುಲಭ.
ನಾವು ಕೋಡ್ ತುಣುಕುಗಳನ್ನು ನೋಡುವ ಮೊದಲು, ನೀವು ಲೈವ್ ಡೆಮೊವನ್ನು ನೋಡಲು ಬಯಸಬಹುದು (ನಿಮ್ಮ ಬ್ರೌಸರ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ).
ಮೊದಲಿಗೆ, ನಾವು HTML ಅನ್ನು ಬಳಸಿಕೊಂಡು ಮೆನುವನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ:
ನಂತರ ನಾವು ನಮ್ಮ ಮೆನುವಿನ ನೋಟ ಮತ್ತು ಭಾವನೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು CSS ಅನ್ನು ನಿರ್ಮಿಸುತ್ತೇವೆ. ಸಂಬಂಧಿತ ಭಾಗಗಳನ್ನು ಇಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
A (ಬಣ್ಣ: #fff; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #333; ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 1s ಸುಲಭ-ಔಟ್; ) a:ಹೂವರ್, a:focus (ಬಣ್ಣ: #333; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #fff; )
ಈ CSS ಮೆನುವಿನ ನೋಟವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ, ಅಂಶವು ಅದರ :ಹೋವರ್ ಮತ್ತು :ಫೋಕಸ್ ಸ್ಟೇಟ್ಸ್‌ನಲ್ಲಿರುವಾಗ ಹಿನ್ನೆಲೆ ಮತ್ತು ಪಠ್ಯ ಬಣ್ಣಗಳೆರಡೂ ಬದಲಾಗುತ್ತವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಉದಾಹರಣೆಗಳು
ತಕ್ಷಣವೇ ಪರಿವರ್ತನೆಯನ್ನು ಬಳಸುವಾಗ ಕಾಳಜಿಯನ್ನು ತೆಗೆದುಕೊಳ್ಳಬೇಕು:
- .appendChild() ಬಳಸಿಕೊಂಡು ಅಂಶವನ್ನು DOM ಗೆ ಸೇರಿಸಲಾಗುತ್ತಿದೆ
- ಒಂದು ಅಂಶದ ಪ್ರದರ್ಶನವನ್ನು ತೆಗೆದುಹಾಕುವುದು: ಯಾವುದೂ ಇಲ್ಲ; ಆಸ್ತಿ.
ಆರಂಭಿಕ ಸ್ಥಿತಿಯು ಎಂದಿಗೂ ಸಂಭವಿಸಿಲ್ಲ ಮತ್ತು ಅಂಶವು ಯಾವಾಗಲೂ ಅದರ ಅಂತಿಮ ಸ್ಥಿತಿಯಲ್ಲಿದೆ ಎಂದು ಇದನ್ನು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಈ ಮಿತಿಯನ್ನು ಜಯಿಸಲು ಸುಲಭವಾದ ಮಾರ್ಗವೆಂದರೆ ನೀವು ಪರಿವರ್ತನೆ ಮಾಡಲು ಉದ್ದೇಶಿಸಿರುವ CSS ಆಸ್ತಿಯನ್ನು ಬದಲಾಯಿಸುವ ಮೊದಲು ಬೆರಳೆಣಿಕೆಯ ಮಿಲಿಸೆಕೆಂಡುಗಳ window.setTimeout() ಅನ್ನು ಅನ್ವಯಿಸುವುದು.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯವನ್ನು ಸುಗಮಗೊಳಿಸಲು ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸುವುದು
ನಿಮ್ಮ JavaScript ಕಾರ್ಯನಿರ್ವಹಣೆಗೆ ಏನನ್ನೂ ಮಾಡದೆಯೇ ವಿಷಯಗಳನ್ನು ಹೆಚ್ಚು ಸುಗಮವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಲು ಪರಿವರ್ತನೆಗಳು ಉತ್ತಮ ಸಾಧನವಾಗಿದೆ. ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ.
ಚೆಂಡನ್ನು ಸರಿಸಲು ಎಲ್ಲಿಯಾದರೂ ಕ್ಲಿಕ್ ಮಾಡಿ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಚೆಂಡನ್ನು ಒಂದು ನಿರ್ದಿಷ್ಟ ಸ್ಥಾನಕ್ಕೆ ಚಲಿಸುವ ಪರಿಣಾಮವನ್ನು ಮಾಡಬಹುದು:
Var f = document.getElementById("foo"); document.addEventListener("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್(ev)( f.style.transform = "translateY("+(ev.clientY-25)+"px)"; f.style.transform += "translateX("+( ev.clientX-25)+"px)" ),false);
CSS ನೊಂದಿಗೆ ನೀವು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಪ್ರಯತ್ನವಿಲ್ಲದೆ ಸುಗಮಗೊಳಿಸಬಹುದು. ಅಂಶಕ್ಕೆ ಪರಿವರ್ತನೆಯನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಯಾವುದೇ ಬದಲಾವಣೆಯು ಸರಾಗವಾಗಿ ಸಂಭವಿಸುತ್ತದೆ:
P (ಪ್ಯಾಡಿಂಗ್-ಎಡ: 60px; ) #foo (ಗಡಿ-ತ್ರಿಜ್ಯ: 50px; ಅಗಲ: 50px; ಎತ್ತರ: 50px; ಹಿನ್ನೆಲೆ: #c00; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಪರಿವರ್ತನೆ: ರೂಪಾಂತರ 1 ಸೆ; )
ಪರಿವರ್ತನೆಯ ಪ್ರಾರಂಭ ಮತ್ತು ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯನ್ನು ಕಂಡುಹಿಡಿಯುವುದು
ಆಸ್ತಿಹೆಸರು ಪರಿವರ್ತನೆ ಪೂರ್ಣಗೊಂಡ CSS ಆಸ್ತಿಯ ಹೆಸರನ್ನು ಸೂಚಿಸುವ ಸ್ಟ್ರಿಂಗ್. elapsedTime ಈವೆಂಟ್ ಉಡಾವಣೆಯಾದ ಸಮಯದಲ್ಲಿ ಪರಿವರ್ತನೆಯು ಎಷ್ಟು ಸೆಕೆಂಡುಗಳು ಚಾಲನೆಯಲ್ಲಿದೆ ಎಂಬುದನ್ನು ಸೂಚಿಸುವ ಫ್ಲೋಟ್. ಈ ಮೌಲ್ಯವು ಪರಿವರ್ತನೆ-ವಿಳಂಬದ ಮೌಲ್ಯದಿಂದ ಪ್ರಭಾವಿತವಾಗಿಲ್ಲ.ಒಂದು ರಾಜ್ಯದಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಅನಿಮೇಟೆಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಹೊಂದಿಸಲು CSS ಪರಿವರ್ತನೆ ಆಸ್ತಿಯ ಅಗತ್ಯವಿದೆ. ಅನಿಮೇಷನ್: ಹೋವರ್ ಮತ್ತು: ಸಕ್ರಿಯ ಹುಸಿ-ಅಂಶಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅಂದರೆ. ವಸ್ತುವು ಒಂದು ಸ್ಥಿತಿಯಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಪರಿವರ್ತನೆಯಾದಾಗ.
CSS ಪರಿವರ್ತನೆಯ ಸಿಂಟ್ಯಾಕ್ಸ್
ಪರಿವರ್ತನೆ: [ಯಾವುದೂ ಇಲ್ಲ |] || || || ;
ಸಿಂಟ್ಯಾಕ್ಸ್ ಸಾಕಷ್ಟು ಬೆದರಿಸುವಂತೆ ಕಾಣುತ್ತದೆ, ಆದರೆ ವಾಸ್ತವವಾಗಿ ಎಲ್ಲವೂ ಸರಳವಾಗಿದೆ. ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಸರಳ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ. ಎರಡು ಉದಾಹರಣೆಗಳ ನಂತರ, ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ಪ್ರತಿಯೊಂದು ಅಂಶವನ್ನು ಚರ್ಚಿಸಲಾಗುವುದು:
ಪರಿವರ್ತನೆಯ ಆಸ್ತಿಯೊಂದಿಗೆ ಉದಾಹರಣೆಗಳು
ಉದಾಹರಣೆ #1. ಪರಿವರ್ತನೆಯ ಮೂಲಕ html ನಲ್ಲಿ ಅನಿಮೇಷನ್
Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:
Код transition: all 1s linear означает следующее:
Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform .
Пример #2. Увеличение объекта в html без смещения других объектов
На странице преобразуется в следующее
Теперь объект увеличивается и не происходит смещения других объектов.
Рассмотрим детально какие значения может принимать каждый из параметров
Значения свойств transition
1. Параметр transition-property
Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения
- all - ко всему объекту (можно опустить, если задано время)
- color - к цвету текста
- background - к цвету фона объекта
- width , height - к изменению габаритов по ширине и высоте соответственно
- none - анимация отсутствует (по умолчанию стоит у каждого элемента)
Для включения нескольких свойств, их можно перечислить через запятую.
2. Параметр transition-duration
Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).
Например
Параметр transition-duration можно задавать отдельным свойством в CSS:
transition-duration : 1s ;
3. Параметр transition-timing-function
Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.
Синтаксис transition-timing-functiontransition-timing-function : value ;
Где value может принимать значения:
- ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
- linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
- ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
- ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
- ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
- step-start - мгновенный старт, равносильно параметру steps(1, start)
- step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
- cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
- steps(a,b) - изменение рывками
Например
4. Параметр transition-delay
Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)
Например
Пример #3. Разные задержки
Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.
На странице преобразуется в следующее
Пример сложной трансформации с задержками
БраузерыНе все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :
- -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
- -webkit-transform-origin - для Chrome, Safari, Android и iOS
- -o-transform-origin - для Opera до версии 12.10
- -moz-transform-origin - для Firefox до версии 16.0
Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:
document.getElementById("elementID").style.transition
CSS свойство transition позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.
Это свойство является короткой записью для следующих свойств (список соответствует порядку указания значений):
Поддержка браузерами
| Свойство | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
CSS синтаксис:
transition: "property duration timing-function delay | initial | inherit" ; /* допускается перечислять эффект перехода отдельно для каждого свойства в одном объявлении */ /* синтаксис будет следующим: property | duration | timing function | delay,..., property | duration | timing function | delay */ /* допускается указывать не все значения, при этом необходимо соблюдать порядок, указанный вверху примера */ /* учтите, что если вы хотите задать только delay, то вам придется указать и duration (0s) */ /* т.е. если вы хотите указать задержку 4 секунды, то вам необходимо записать это transition: 0s 4s; */ transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s; /* Смотри пример внизу страницы */JavaScript синтаксис:
Object.style.transition = "width 3s ease-out 2s"
Значения свойства
| Значение | Описание |
|---|---|
| transition-property | Указывает имя свойства CSS для которого используется переходный эффект. Значение по умолчанию all. |
| transition-duration | Определяет, сколько секунд или миллисекунд эффект перехода занимает времени. |
| transition-timing-function | Используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую "разгона", так что скорость перехода может меняться в течение длительности эффекта перехода. Значение по умолчанию ease. |
| transition-delay | Указывает, когда эффект перехода начнется (выступает в роли задержки начала эффекта). Значение по умолчанию 0 секунд. |
| Устанавливает свойство в значение по умолчанию. | |
| Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
ಗುಣಲಕ್ಷಣ ಸೆಲೆಕ್ಟರ್ (ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯದೊಂದಿಗೆ) ಮತ್ತು ಪರಿವರ್ತನೆಯ ಸಾರ್ವತ್ರಿಕ ಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು CSS ನಲ್ಲಿ ಸ್ಲೈಡಿಂಗ್ ಹುಡುಕಾಟದ ಉದಾಹರಣೆ:
ಸೇರಿಸಿದ ದಿನಾಂಕ: 2011-10-16
ಆಸ್ತಿ ಪರಿವರ್ತನೆಹೊಸ CSS3 ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಅವನನ್ನು ಚೆನ್ನಾಗಿ ತಿಳಿದುಕೊಳ್ಳೋಣ.
ನೀವು ಮೌಸ್ ಅನ್ನು ಮೇಲಿರುವಾಗ, ಲಿಂಕ್‌ನ ಬಣ್ಣವು ಬದಲಾಗುತ್ತದೆ ಎಂಬ ಅಂಶಕ್ಕೆ ನಾವೆಲ್ಲರೂ ಒಗ್ಗಿಕೊಂಡಿರುತ್ತೇವೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಮೃದುವಾದ ಪರಿವರ್ತನೆಯಿಲ್ಲದೆ ಬಣ್ಣವು ಥಟ್ಟನೆ ಬದಲಾಗುತ್ತದೆ. ಆಸ್ತಿ ಪರಿವರ್ತನೆಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸದೆ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸುವಾಗ ಸಣ್ಣ ಅನಿಮೇಶನ್ ಅನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಗೆ ವಿವರಣೆಯಲ್ಲಿ ಈ ಆಸ್ತಿಇದು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಹೇಳುತ್ತದೆ:
ಸಿಎಸ್ಎಸ್ ಪರಿವರ್ತನೆಗಳು ಸಿಎಸ್ಎಸ್ ಮೌಲ್ಯಗಳಲ್ಲಿನ ಆಸ್ತಿ ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ಅವಧಿಯಲ್ಲಿ ಸರಾಗವಾಗಿ ಸಂಭವಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, CSS ಪರಿವರ್ತನೆಗಳು ಸರಾಗವಾಗಿ ಮತ್ತು ಕಾಲಾನಂತರದಲ್ಲಿ CSS ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬದಲಾವಣೆಗಳನ್ನು ನಿಯೋಜಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಆಸ್ತಿಯನ್ನು ಅನ್ವಯಿಸಿ ಪರಿವರ್ತನೆಯಾವುದಕ್ಕೂ ಅನ್ವಯಿಸಬಹುದು - ಹಿನ್ನೆಲೆ, ಬಣ್ಣ, ಉದ್ದ, ಫಾಂಟ್ ಗಾತ್ರ, ಇತ್ಯಾದಿ. ಇವುಗಳು ಮೂಲತಃ ಬಣ್ಣ ಅಥವಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಗುಣಲಕ್ಷಣಗಳಾಗಿವೆ ಉದ್ದದ ಘಟಕಗಳು (px, em, ex) ಅಥವಾ ಶೇಕಡಾವಾರುಗಳಲ್ಲಿ ವ್ಯಕ್ತಪಡಿಸಬಹುದು. ನಾವು ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು:ಫೋಕಸ್ ಮತ್ತು:ಆಕ್ಟಿವ್ ಅನ್ನು ಈವೆಂಟ್‌ನಂತೆ ಬಳಸಬಹುದು.
ಬ್ರೌಸರ್‌ಗಳು
ಬ್ರೌಸರ್‌ಗಳ ಬಗ್ಗೆ ನಾನು ಈಗಿನಿಂದಲೇ ಹೇಳುತ್ತೇನೆ - ಹೊಸ ಮಾನದಂಡಇನ್ನೂ ಅಂಗೀಕರಿಸಲಾಗಿಲ್ಲ, ಆದ್ದರಿಂದ ಈ ಕ್ಷಣಪೂರ್ವಪ್ರತ್ಯಯಗಳು -webkit-, -moz- ಮತ್ತು -o- ಅನ್ನು ಬಳಸಬೇಕು. ಆಸ್ತಿಯು ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂದು ಇದು ತೋರಿಸುತ್ತದೆ ಕ್ರೋಮ್ ಬ್ರೌಸರ್‌ಗಳು, ಸಫಾರಿ, ಒಪೇರಾ 10.5+, ಫೈರ್‌ಫಾಕ್ಸ್ 4+. ನಮ್ಮ "ಮೆಚ್ಚಿನ" ಅಂತರ್ಜಾಲ ಶೋಧಕಯಾವಾಗಲೂ, ಕೆಲಸವಿಲ್ಲದೆ, ಬಳಕೆದಾರರು ಯಾವುದೇ ಅನಿಮೇಷನ್ ಅನ್ನು ನೋಡುವುದಿಲ್ಲ.
ಈ ಲೇಖನದಲ್ಲಿ ನಾನು ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ಬಳಸಿದ್ದೇನೆ -ವೆಬ್ಕಿಟ್-, ಆದ್ದರಿಂದ ಇಲ್ಲಿ ನೀಡಲಾದ ಎಲ್ಲಾ ಉದಾಹರಣೆಗಳು Chrome ಮತ್ತು Safari ನಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.
ಸರಳ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ - ಲಿಂಕ್ ಹಿನ್ನೆಲೆಯ ಮೃದುವಾದ ಪರಿವರ್ತನೆಯನ್ನು ಸೇರಿಸಿ
ಮೊದಲಿಗೆ, ಮೌಸ್‌ನೊಂದಿಗೆ ಅದರ ಮೇಲೆ ಸುಳಿದಾಡುವಾಗ ಲಿಂಕ್‌ನ ಬಣ್ಣವನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಎಂದು ನೆನಪಿಸೋಣ.
ಈಗ ನಾವು CSS ಆಸ್ತಿಯನ್ನು ಬಳಸೋಣ ಪರಿವರ್ತನೆಲಿಂಕ್‌ನ ಹಿನ್ನೆಲೆಯನ್ನು ಸರಾಗವಾಗಿ ಬದಲಾಯಿಸಲು. ತರಗತಿಗೆ ಹೋಲುವ ಹೊಸ ವರ್ಗವನ್ನು ರಚಿಸೋಣ ಸರಳಮತ್ತು ಕೆಲವು ಹೊಸ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ:
A.cool (ಪ್ಯಾಡಿಂಗ್: 5px 10px; ಹಿನ್ನೆಲೆ: #69f; ಬಣ್ಣ: #000; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ಆಸ್ತಿ: ಹಿನ್ನೆಲೆ; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ಅವಧಿ: 0.5 ಸೆ; -ವೆಬ್ಕಿಟ್-ಟ್ರಾನ್ಸಿಶನ್-ಟೈಮಿಂಗ್-ಫಂಕ್ಷನ್: ಸುಲಭ; ) a.cool:ಹೂವರ್ (ಹಿನ್ನೆಲೆ: #33f; ಬಣ್ಣ: #fff; )
ಇನ್ನೂ ಒಂದೆರಡು ಪರೀಕ್ಷಾ ಲಿಂಕ್‌ಗಳನ್ನು ರಚಿಸೋಣ ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ನೋಡೋಣ:
ಈಗ ನಮ್ಮ ಹಿನ್ನೆಲೆ ಸರಾಗವಾಗಿ ಅರ್ಧ ಸೆಕೆಂಡಿನಲ್ಲಿ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ! ಉದಾಹರಣೆಯಿಂದ ನಾವು ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಮೂರು ಹೊಸ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ ಎಂದು ನೀವು ನೋಡಬಹುದು -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ಆಸ್ತಿ, -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ಅವಧಿ, -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ಸಮಯ-ಕಾರ್ಯ.
ವಾಸ್ತವವಾಗಿ, ಅವುಗಳನ್ನು ಒಂದು ಆಸ್ತಿಯಾಗಿ ಸಂಯೋಜಿಸಬಹುದು:
ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಹಿನ್ನೆಲೆ 0.5 ಸೆ ಸುಲಭ;
ನೀವು ಪಠ್ಯದ ಬಣ್ಣದಲ್ಲಿ ಮೃದುವಾದ ಬದಲಾವಣೆಯನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು:
A.cool2 (ಪ್ಯಾಡಿಂಗ್: 5px 10px; ಹಿನ್ನೆಲೆ: #69f; ಬಣ್ಣ: #000; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಹಿನ್ನೆಲೆ 0.5 ಸೆ ಸುಲಭ, ಬಣ್ಣ 1.0 ಸೆ ಸುಲಭ; ) a.cool2: ಹೋವರ್ (ಹಿನ್ನೆಲೆ: #33f; ಬಣ್ಣ: #ffff ;)
ಈ ಕೋಡ್, ಮೌಸ್ ಅನ್ನು ತೂಗಾಡುತ್ತಿರುವಾಗ, ಅರ್ಧ ಸೆಕೆಂಡಿನಲ್ಲಿ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಮತ್ತು 1 ಸೆಕೆಂಡಿನೊಳಗೆ ಫಾಂಟ್ ಬಣ್ಣವನ್ನು ಸರಾಗವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ. ನಾವು ಪರಿಶೀಲಿಸುತ್ತೇವೆ:
ನಾವು ಅನಿಮೇಷನ್‌ಗಾಗಿ ಅದೇ ನಿಯತಾಂಕಗಳನ್ನು ಬಳಸಿದರೆ, ನಾವು ಅಭಿವ್ಯಕ್ತಿಯನ್ನು ಬಳಸಬಹುದು: -webkit-transition: ಎಲ್ಲಾ 0.5s ಸುಲಭ;
ಈಗ ಪರಿವರ್ತನೆಯ ಪರಿಣಾಮವನ್ನು ಎಲ್ಲಾ ಬದಲಾಗುತ್ತಿರುವ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಅದೇ ನಿಯತಾಂಕಗಳೊಂದಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ - 0.5 ಸೆಕೆಂಡುಗಳು, ಸುಲಭ ಪರಿಣಾಮ.
ನೀವು ಬಳಸಿಕೊಂಡು ಪರಿಣಾಮಕ್ಕೆ ವಿಳಂಬವನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು ಪರಿವರ್ತನೆ-ವಿಳಂಬ:
A.cool3 (ಪ್ಯಾಡಿಂಗ್: 5px 10px; ಹಿನ್ನೆಲೆ: #69f; ಬಣ್ಣ: #000; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಎಲ್ಲಾ 0.5s ಸುಲಭ; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ವಿಳಂಬ: 0.5ಸೆ; ) a.cool3:ಹೋವರ್ (ಹಿನ್ನೆಲೆ: #33f ಬಣ್ಣ: #fff ;
ಈಗ ಅನಿಮೇಷನ್ ಮೌಸ್ ಅನ್ನು ಸುಳಿದಾಡಿದ ನಂತರ ಅರ್ಧ ಸೆಕೆಂಡ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ಪರಿಶೀಲಿಸೋಣ:
ಲುಕ್ಅಪ್ ಟೇಬಲ್
ವಸ್ತುವನ್ನು ಚೆನ್ನಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ನಾನು ನಿಮ್ಮ ಗಮನಕ್ಕೆ ಸಣ್ಣ ಉಲ್ಲೇಖ ಕೋಷ್ಟಕವನ್ನು ತರುತ್ತೇನೆ.
ಪರಿವರ್ತನೆ-ಆಸ್ತಿ ನಾವು ಅನಿಮೇಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುವ ಆಸ್ತಿ. ಬಹುತೇಕ ಯಾವುದೇ CSS ಆಸ್ತಿ: ಬಣ್ಣ, ಹಿನ್ನೆಲೆ, ಅಗಲ, ಫಾಂಟ್ ಗಾತ್ರ, ಇತ್ಯಾದಿ. ಪರಿವರ್ತನೆ-ಅವಧಿ ಅನಿಮೇಷನ್ ಅವಧಿ. ಸೆಕೆಂಡುಗಳಲ್ಲಿ ಸಮಯ. ಪರಿವರ್ತನೆ-ಸಮಯ-ಫಂಕ್ಷನ್ ಅನಿಮೇಷನ್‌ಗಾಗಿ ಬಳಸಲಾಗುವ ಟೈಮಿಂಗ್ ಫಂಕ್ಷನ್: ಸುಲಭ, ರೇಖೀಯ, ಈಸ್-ಇನ್-ಔಟ್, ಈಸ್-ಇನ್, ಈಸ್-ಔಟ್, ಕ್ಯೂಬಿಕ್-ಬೆಜಿಯರ್ ಟ್ರಾನ್ಸಿಶನ್-ಡೆಲೇ ಅನಿಮೇಷನ್ ವಿಳಂಬ. ಸೆಕೆಂಡುಗಳಲ್ಲಿ ಸಮಯ.