Advice generator app solution

Hi The Nghia,

The differences between animation and transition in CSS are:

• Animation in CSS refers to the creation of motion through a series of keyframe rules
• Animations allow for more complex and customizable motion
• Animations are defined using the @keyframes rule and controlled using the animation property

<div class="square"></div>

.square {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    animation: move-right 2s linear infinite;
}

@keyframes move-right {
    from {
        left: 0;
    }
    to {
        left: 100%;
    }
}

• Transition refers to a simple change in state, such as a hover effect, that occurs smoothly over a set duration.
• Transitions are generally simpler and more limited in scope.
• Transitions are controlled using the transition property.

<button class="my-button">Hover me</button>

.my-button {
    background-color: blue;
    color: white;
    padding: 10px;
    transition: background-color 0.5s ease;
}

.my-button:hover {
    background-color: red;
}

Hope you found this helpful!

• Let's connect on LinkedIn! - @Eileenpk