08. Animations and transformations - Gr0mi4/Hello-World GitHub Wiki

  1. Learn how animations work in CSS (learn animation property and @keyframes).
  2. Create a fancy logo animation according to the following design:
  • Start with a simple white square (you can put any logo inside if you want to make it look cool). Add a 1px solid border.
  • Implement an animation, so that a rectangle filled with color expands along the square logo side until it hits the end of the side and then it shrinks to 0 width. At the moment when it hits the end of the side – another rectangle start to expand along the next side. So it looks like one rectangle goes to another side of the rectangle logo and continues to move there. Then it continues to move around the logo infinitely.
  • Improve the animation, so that a rectangle has now a dynamic gradient (it starts as a filled with color (flat gradient) and then the start color transitions to white color so that the linear gradient is clearly visible). This is the final look: