How to make infinite rotation of image with vue-kinesis?
Closed this issue · 1 comments
gilles6 commented
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.
amineyarman commented
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.