Chapter 16CSS Tutorial~1 min read

CSS Animations

@keyframes आणि Animation Properties

CSS Animations म्हणजे elements एका state मधून दुसऱ्या state मध्ये smoothly transition करणे — JavaScript शिवाय. Loading spinners, hover effects, page transitions — सगळे CSS Animations ने बनतात.

Animation चे 2 Core Components

▸@keyframes — Animation मध्ये काय बदल होणार ते define करतो
▸animation properties — Animation कसे run होईल — speed, timing, repeat

@keyframes — Animation Define करणे

@keyframes — Basic Example

css

/* Simple color change animation */
@keyframes colorChange {
    from { background-color: red; }   /* Start */
    to   { background-color: blue; }  /* End */
}

/* Percentage वापरून — more control */
@keyframes moveBox {
    0%   { transform: translateX(0px);   background: red; }
    50%  { transform: translateX(150px); background: yellow; }
    100% { transform: translateX(0px);   background: green; }
}

Animation Properties

Animation Properties — उदाहरण

css

div {
    width: 150px;
    height: 150px;
    background: red;

    animation-name: colorChange;      /* @keyframes चे नाव */
    animation-duration: 3s;           /* किती वेळ — 3 seconds */
    animation-iteration-count: infinite; /* किती वेळा — infinite */
    animation-delay: 1s;              /* सुरुवातीला wait */
    animation-direction: alternate;   /* forward, reverse, alternate */
    animation-timing-function: ease;  /* Speed curve */
}

Shorthand — सगळे एकत्र

Animation Shorthand

css

/* animation: name duration timing-function delay iteration-count direction fill-mode */
div {
    animation: colorChange 3s ease 0s infinite alternate forwards;
}

/* Spinning + Scaling animation */
@keyframes spinScale {
    0%   { transform: rotate(0deg)   scale(1);   background: orange; }
    50%  { transform: rotate(180deg) scale(1.3); background: purple; }
    100% { transform: rotate(360deg) scale(1);   background: teal; }
}

.spinner {
    animation: spinScale 5s ease-in-out 0s infinite alternate;
}

Loading Spinner — Practical Example

CSS Loading Spinner

css

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid orange;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

💡

CSS Animations जड animations साठी prefer करतात कारण browser GPU वापरतो — JavaScript animations पेक्षा smooth असतात. transform आणि opacity animate करणे सगळ्यात performant आहे.

✅ Key Points — लक्षात ठेवा

▸@keyframes = animation काय करेल ते define करतो
▸animation-name + animation-duration minimum लागतात
▸from/to किंवा 0%/50%/100% — keyframe stops
▸animation-iteration-count: infinite — loop
▸Shorthand: animation: name duration timing delay count direction

0/16 chapters पूर्ण

मागे — Previous

CSS Media Queries

अभिनंदन! 🎉

Tutorial Complete!