CSS Animations

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Creating smooth and interactive animations is an essential skill for any web developer. The good news is that with CSS, you can achieve this without relying on JavaScript or other scripting languages. Are you ready to put some life into your web pages? Let's dive in!

CSS Transitions

CSS transitions allow us to animate the change of a property value over a specified duration. For example, you can smoothly change the background color or font size of an element when a user hovers over it. Here's a simple example:

button {
  background-color: blue;
  transition: background-color 0.5s;
}

button:hover {
  background-color: green;
}

In this example, when the user hovers over a button, its background color will transition from blue to green in 0.5 seconds.

CSS Keyframe Animations

For more complex animations, we can use CSS keyframes. Keyframes allow us to define the state of an element at different points during an animation. By specifying keyframes, we can create multi-step animations. Here's an example of a simple keyframe animation that rotates a square:

@keyframes rotateSquare {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotateSquare 2s linear infinite;
}

In this example, we define a keyframe animation called rotateSquare. At the beginning of the animation (0%), the square is not rotated (0 degrees). At the end of the animation (100%), it's rotated by 360 degrees. The square element uses this animation, taking 2 seconds to complete one rotation and repeating indefinitely.

Interactive Animations

We've covered simple animations, but what if we want to make them interactive? We can do this using the power of CSS pseudo-classes. For example, let's create an interactive card flip animation:

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

.card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.card-front {
  background-color: blue;
}

.card-back {
  background-color: green;
  transform: rotateY(180deg);
}

In this example, we create a card element with two sides: .card-front and .card-back. When the user hovers over the card, the .card-inner element rotates 180 degrees on the Y-axis, revealing the other side of the card. The transition creates a smooth flip animation.

FAQ