CSS Animations and Transitions

CSS Animations and Transitions

CSS animations and transitions add life to your web elements. They make your website more dynamic and engaging.

1. CSS Transitions

Transitions allow smooth changes between CSS property values.

button {
    background-color: #2E8B57;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #3CB371;
}

2. CSS Animations

Animations can create complex movements using keyframes.

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
div {
    animation: slideIn 1s ease-in-out;
}

Conclusion: CSS animations and transitions make your website visually appealing and interactive. Experiment with them to create stunning effects!