Advice generator app solution

Community feedback

• 

  Eileen dangelo•1,600

  @EileenpkPosted almost 2 years ago

  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

  Marked as helpful

  0