Carrd has its own hover animations which are easy to use without knowledge of CSS.

There are 11 native animations:

native animations at Carrd

But in specific situations, you might need much more but don't worry because animating pictures using CSS on Carrd is a simple process that can add an extra level of engagement to your website.

Here are the steps to add a simple animation to a picture on Carrd:

Add embed element, change style for the hidden head then add one of those:

  • Shaking image on hover:

    • .shaking-image {
transition: all 0.5s;
}
.shaking-image:hover{
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: rotate(2deg); }
10% { transform: rotate(-2deg); }
20% { transform: rotate(2deg); }
30% { transform: rotate(-2deg); }
40% { transform: rotate(2deg); }
50% { transform: rotate(-2deg); }
60% { transform: rotate(2deg); }
70% { transform: rotate(-2deg); }
80% { transform: rotate(2deg); }
90% { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}

  • Jump animation on hover:

    • <style>
.jump {
    transition: all 0.3s;
}
.jump:hover{
  animation: jump 0.5s;
}
@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}
</style>

  • Twist animation on hover:

    • .twist {
    transition: all 0.3s;
}
.twist:hover{
  animation: twist 1s linear infinite;
}
@keyframes twist {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

    In the end, go to the image you want to animate to section settings (gear icon) and add the class name like in the picture below:

    add the class name

    Those are just 3 examples of CSS animations that you can use but not only, Carrd allows you to add almost any kind of CSS animation.

    See more templates | Try Carrd | Need help? Contact us.