Animasyonlar ve Geçişler

Transition ve @keyframes ile hareket ekleme.

Transition, bir özelliğin değişimini yumuşatırken, @keyframes bir dizi aşamayı tanımlar.

Hover Transition

.button {
    background: #ff5722;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}
.button:hover {
    background: #e64a19; /* yumuşak geçiş */
}

Basit Keyframes

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fade-in {
    animation: fadeIn 2s ease-in-out;
}