How to make infinite rotation of image with vue-kinesis?

[gilles6]

I'm using vue-kinesis to animate an image, my component below works fine, but the animation is actually done with css directly. How should I change my configuration to make vue-kinesis manage the rotation ?

<template>
  <kinesis-container>
    <kinesis-element type="depth" :strength="20">
      <v-img class="mb-5 image" src="/my-image.png" alt="Cell" />
    </kinesis-element>
  </kinesis-container>
</template>
<script>
import { KinesisContainer, KinesisElement } from 'vue-kinesis'
export default {
  components: {
    KinesisContainer,
    KinesisElement,
  },
}
</script>

<style scoped>
.image {
  -webkit-animation: spin 180s linear infinite;
  -moz-animation: spin 180s linear infinite;
  animation: spin 180s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

This question was previously asked here.

[amineyrman]

Hello,

vue-kinesis is really only for interactive animations. So for this type of animation you either need to do it with CSS as you did, or use another component.